firebase 저장된 이미지 불러오기

Firebase Storage

동영상과 같은 컨텐츠를 저장할 수 있는 저장소인 Firebase Storage를 활용하여 업로드, 컨텐츠를 가져올 수 있다.

 

규칙수정

 

이미지 저장

파란색 버튼은 파일 업로드를 통해 이미지를 올려도 되고 하위 이미지처럼 폴더 생성 후 폴더안에 이미지를 저장할 수 있다.

 

 

파일 하나만 가져올 경우

이미지 파일 URL을 얻는 방식으로 가져온다.

import { ref, listAll, getDownloadURL } from "firebase/storage";
import { fireStorage } from "../../firebase/firebasedb";
import { useEffect } from "react";

export default function Test() {
	const [url, setUrl] = useState("");
  const g = async () => {
    const imageURL = await getDownloadURL(
      ref(fireStorage, "스크린샷 2024-01-09 160020.png")
    );
    setUrl(imageURL);
  };
  useEffect(() => {
    g();
  }, []);

  return (
    <div className="flex flex-col gap-3 ml-5">
			 <Image src={url} alt="1" width={200} height={200} />
		</div>
  );
}

 

 

 

폴더 안 여러 이미지 가져올 경우

getStaticProps를 활용하여 특정 폴더 안 이미지를 가져온다.

import { ref, listAll, getDownloadURL } from "firebase/storage";
import { fireStorage } from "../../firebase/firebasedb";
import Image from "next/image";

type Props = {
  images: string[];
};

export default function Test({ images }: Props) {
  console.log("이미지 다운로드 URL:", images);

  return (
    <div className="flex flex-col gap-3 ml-5">
      <p>Test</p>
      <Image src={images[0]} alt="1" width={200} height={200} />
      <Image src={images[1]} alt="1" width={200} height={200} />
    </div>
  );
}

export async function getStaticProps(): Promise<{ props: Props }> {
  const fileRef = ref(fireStorage, "coverImage/");
  // coverImage/ 하위에 있는 모든 파일에 대한 참조
  const result = await listAll(fileRef);
  const urls = await Promise.all(
    result.items.map(async (item) => {
      const url = await getDownloadURL(item);
      return url;
    })
  );

  console.log(urls);

  return {
    props: {
      images: urls,
    },
  };
}

 

 

결과

 

 

 

참고

https://velog.io/@taemin4u/firebase-storage-React에서-이용하기

firebase storage React에서 이용하기