파이어베이스에 CKEditor를 이용하여 이미지 등록 후 썸네일 불러오기

내가 예전에 했다가 오랜만에 코드를 봤더니 기억이 안나서 기록해두는 글...;;;

 

파이어베이스에 CKEditor를 이용하여 이미지 등록 후 글목록을 만들고 글제목쪽에 썸네일 넣고 싶을 때

 

 

 

db에는 이런식으로 스토리지에 파일이 저장된 주소가 나오는데, 이걸 <img src=fileUrl /> 이런식으로 하면 웹에서 이미지가 뜨지 않는다

저 주소만 보면 끝이 jpg라서 바로 이미지파일인거 같지만, 저 주소로 접속해보면,

 

 

이런 json이 뜬다

 

난 이미지를 가져오고 싶은데? 스토리지에 저장된 실제 이미지는 주소가 다른가? 생각이 들어서

파이어베이스 콘솔에서 직접 이미지의 주소를 보았더니

 

 

https://firebasestorage.googleapis.com/v0/b/coju-bu.appspot.com/o/CoinPostDB%2F201111%2F1141%2F12.png?alt=media&token=5056f318-4d97-4478-a409-b9d1262d3a8a

 

이런식으로 뜬다

이 주소로 접속해보면 실제로 이미지가 뜬다

 

https://부터 .png까지는 db에 등록된 파일url과 일치한다

 

그 이후엔 ?alt=media&token=어쩌구저쩌구가 있는데

 

이 token 부분이 json의 downloadTokens와 일치한다

 

<tbody>
          {list.map((item, index) => {
            const {
              fileUrl,
              title,
              creatorNickname,
              createdAt,
              upVote,
              id,
              views,
              comment,
            } = item;

            const { downloadTokens } = fileUrl;

            return (
              <tr key={index}>
                <td>{index}</td>
                <td>
                  <img
                    src={`${fileUrl}?alt=media&amp;token=${downloadTokens}`}
                    width="50px;"
                    alt=""
                  />
                </td>

 

예쓰~!

 

코딩 부분에서 downloadTokens을 따로 변수로 받아온 뒤에,

 

<img src={`${fileUrl}?alt=media&amp;token=${downloadTokens}`}

 

잘된다

개쩔음