선생님 Image 질문있습니다

[정중식]

next/Image

질문잇습니다.

react fullpage라이브러리를 사용해서
fullpage 기능을 개발중인데,

<Image src={data.imgUrl} alt='이미지' fill /> 

이렇개 해주면 처음 브라우저를 로드할때 이미지가 안뜹니다.
브라우저 창 사이즈를 한번 만져주면 로드가되서 골치인데요..
이럴땐 어떻게해줘야하나요?

[codingapple]

fullpage 안쓸 땐 잘되나 확인해봅시다

[정중식]

선생님 파이어베이스 v9에서 파이어스토리지에 저장된 이미지 가져오려면 어떤식으로해야될까요?

aws s3처럼 

post 데이터에 img파일명만 집어넣고
버켓 주소 + /imags(버켓폴더명)/ img파일명 이렇게 불러와주면되는줄알고 했는데 안되는거같아요..ㅠㅠㅠ

어떤식으로해와야하는건가요? 계속헤매고있는데.. 굽신굽신

[codingapple]

이미지 업로드하면 url 뱉어주는데 그걸 firestore같은데다가 저장해서 씁시다

[정중식]

선생님 즐거운 추석보내세요..

"do-good-evening.appspot.com/images/3ac768b4-e9a7-42a6-b6f8-4364a80bd22d_노을1.jpg"

이렇게 파이어스토어 데이터베이스에 저장해놨는데,

그러면 불러올때는 어떻게 불어와야할까요?

nextjs에서

next.config.js 설정 이렇게해줬고,

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  images: {
    domains: ['firebasestorage.googleapis.com'],
  },
};

module.exports = nextConfig;

 {posts.map((data, index) => (
        
                <div className='swiper-wrapper'>
                  {/* 포스팅 사진 */}
                  < img src={data.imgUrl} alt='이미지' />

...

}

이렇게 불러와주고있는데 여전히 엑박과 400에러가뜨고있습니다.

3ac768b4-e9a7-42a6-b6f8-4364a80bd22d_%EB%85%B8%EC%9D%841.jpg:1 GET http://localhost:3000/do-good-evening.appspot.com/images/3ac768b4-e9a7-42a6-b6f8-4364a80bd22d_%EB%85%B8%EC%9D%841.jpg 404 (Not Found)

data.imgUrl은

"do-good-evening.appspot.com/images/3ac768b4-e9a7-42a6-b6f8-4364a80bd22d_노을1.jpg"

이렇게되어있습니다.

[정중식]

아니면

이곳 에서 제시한방법대로 getDownloadURL 메서드를 통해 stroage에서 파일을 다운로드 해서 사용해야하나요?..

[정중식]

해결완료!

[글쓴이]

글