Firebase에서 ImagePath를 ImageUrl로 변경해서 사용하기

최근 Firebase를 사용해보고 있다.

근데 이미지 렌더링에서 문제가 생기는데...

(다른 데이터들은 렌더링 잘만 되는데, 왜 Image만 안 되니...)

알아보니 imagePath를 그대로 쓸 때 이런 에러가 생기는 이유는,
Firebase Storage의 보안 구조 때문이라고 한다.

---

보통 imagePath는 이런 형태를 띈다.

images/hobby123.jpg

이는 Firebase Storage 내부 경로일 뿐, 웹에서 직접 접근할 수 있는 URL은 아니다.

따라서 웹에서 이미지를 img 태그로 보여주기 위해서는, https로 시작하는 전체 URL이 필요하다.

예를 들면:

https://firebasestorage.googleapis.com/v0/b/your-app-id.appspot.com/o/images%2Fhobby123.jpg?alt=media&token=...

이러한 URL로 만들어주기 위해서는 getDownloadURL() 함수를 사용해야 한다.

그래서 나는 아래와 같이 imagePath 데이터를 imageURL로 변형해서 적용했다.

for (const doc of querySnapShot.docs) {
  const hobby = {
    id: doc.id,
    ...doc.data(),
  } as HobbyData;

  if (hobby.imagePath) {
    const imageRef = ref(storage, hobby.imagePath);
    hobby.imageUrl = await getDownloadURL(imageRef);
  }

  hobbyList.push(hobby);
}

그 결과...

화면에 잘 뜬다!