nextjs image 최적화 이후 404 발생 및 화면 무한 로딩

이미지에 문제가 있다고 판단함.

하지만 사파리 개발자 도구 연결해서 확인했을경우

요약
URL: https://junyoung-sanha.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fp34.f118a8bb.jpg&w=1200&q=75
상태: 404
소스: 네트워크
주소: 76.76.21.123:443

요청
:method: GET
:scheme: https
:authority: junyoung-sanha.vercel.app
:path: /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fp34.f118a8bb.jpg&w=1200&q=75
Accept: image/webp,image/avif,image/jxl,image/heic,image/heic-sequence,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5
Sec-Fetch-Site: same-origin
Cookie: _vercel_jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJVMEVnVGJJTThtWWpVcGZSWDBzOVFTY08iLCJpYXQiOjE3MTc3MjUyNzEsImF1ZCI6Imp1bnlvdW5nLXNhbmhhLnZlcmNlbC5hcHAiLCJ1c2VybmFtZSI6ImtnbmVuZzIiLCJzdWIiOiJzc28tcHJvdGVjdGlvbiJ9.RfrwzDcuDBp1FphK3n7VvFjd4FZ5Hdzxu2sZtvCzOjo
Sec-Fetch-Dest: image
Accept-Language: ko-KR,ko;q=0.9
Sec-Fetch-Mode: no-cors
Host: junyoung-sanha.vercel.app
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1
Referer: https://junyoung-sanha.vercel.app/
Accept-Encoding: gzip, deflate, br
Connection: keep-alive

응답
:status: 404
Content-Type: text/html
Access-Control-Allow-Origin: *
Content-Security-Policy: script-src 'none'; frame-src 'none'; sandbox;
Age: 0
Content-Encoding: br
Content-Disposition: inline; filename="p34.bin"
Cache-Control: public, max-age=0, must-revalidate
Date: Fri, 07 Jun 2024 02:28:24 GMT
Vary: Accept
Last-Modified: Fri, 07 Jun 2024 02:28:21 GMT
x-matched-path: /404
Server: Vercel
x-vercel-cache: MISS
x-vercel-imgsrc: 5a47c53bdfa4457c99fc459b14a698c1
x-vercel-id: icn1::8j57b-1717727304252-6789d312146e
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

쿼리 문자열 매개변수
url: /_next/static/media/p34.f118a8bb.jpg
w: 1200
q: 75

특정 이미지에 대해서 가져오지 못하는 현상 발생.

각각 테스트했을때,

// 41이나, 33이 문제임 -> 41로 추정 // p9, p10

얘네도 문제있는걸로 파악했음.

왜이러는 현상이 발생하는지 조사필요함.

kgneng2 / wedding-card

nextjs image 최적화 이후 404 발생 및 화면 무한 로딩 #3

해결방법