안녕하세요.

니꼬샘의 next js 강의를 듣고 jsonplaceholder 에서

이번엔 이미지(photos)를 fetch 해서 화면에 나타내보고자 하는데

아래와 같은 이슈가 도무지 해결되질 않네요 ㅠ.ㅠ

데이터를 가져오긴 하는데 이미지를 못가져 오는 것 같아요..

title 같은 다른 데이터는 나오는데 이미지가 엑박 같이 뜨면서 (하단 캡처 참조)

콘솔에는 Failed to load resource: the server responded with a status of 403 (Forbidden) 이렇게 메시지가 나오고,

네트워크 탭에 로드 실패한 파일의 메시지를 보면 "url" parameter is valid but upstream response is invalid 이라고 나오구요

vs code 터미널에는 upstream image response failed for https://via.placeholder.com/150/92c952 403 이런식으로 메시지가 나옵니다.

우선 체크해본 부분은

local이미지는 로드되는지 public 폴더에 넣어서 해봤는데 로컬은 로드가 잘 되더라구요..

외부사이트에서 가져오는 거라서 next.config.js 파일에 domains 으로 경로도 입력해주었고..

혹시나 해서 getServerSideProps 로도 해보고..

검색하고 공식문서에서 이것저것 알아보다가 priority 속성 반영도 해줘봤고,

크롬 브라우저의 ad block 같은게 영향을 준다고 하는 글도 있어서

해당 앱을 중단하거나 삭제하고 재실행 해봤는데 변화가 없네요..

혹시 어떤 다른 시도를 해볼 수 있을까 해서 말씀을 듣고자 글을 남겨 여쭤봅니다~

< 코드 >

[ photos.js ]

import HeadInfo from "../components/HeadInfo"
import Image from 'next/image'
import photosStyles from "../styles/Photos.module.css"

const photos = ({ photos }) => {
  return (
    <div>
      <HeadInfo title="photos" />
      <h1>My photos</h1>
      <ul className={photosStyles.photos}>
        {photos.map(photo => (
          <li key={photo.id}>
            <Image src={photo.thumbnailUrl} width={100} height={100} alt={photo.title} priority />
            <span>{photo.title}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}

export const getStaticProps = async () => {
  
  const res = await fetch('https://jsonplaceholder.typicode.com/photos?_start=0&_end=10')
  const photos = await res.json();

  return {
    props: {
      photos,
    },
  }
}

export default photos