Next/image에서 외부 이미지를 가져오지 못하는 이슈

 

 

 

 

다른 이미지는 괜찮은데,

elasticbeanstalk-ap-northeast-2-319210348301.s3.ap-northeast-2.amazonaws.com

이와 같은 url을 가진 이미지를 불러오지 못하는 이슈가 발생했다.

 

402 (Payment Required)

 

Response값에는 다음과 같은 문구가 있었다.

 

Payment required

OPTIMIZED_IMAGE_REQUEST_PAYMENT_REQUIRED

 

그리고 viewport의 width값을 조정하여, 472px 이하로 만들면 이미지가 정상적으로 보였다.

 

 

디바이스 크기가 바뀔 때마다 이미지 최적화 Request를 보내는데, 이것이 427px 이하일 때만 정상 작동하고 있었다.

 

 

next/Image에서 디바이스 크기에 따라 최적화를 해주는데, 어떤 이유에서인지 특정 크기에서만 정상 작동하고 있다.

 

 

시도해 본 것

1. Image 태그에 width, height 값 적용 
   1. 이미지 최적화 요청에서 w값이 고정되고 동일 증상 반복
      
      1. Image의 크기와는 상관없이 viewport의 값에 따라 w값이 설정되어야 할 텐데 왜 w값이 고정되었는지는 이해할 수가 없다. (잘못 본 것일 수도 있다.)
2. next/Image 대신 img 태그 사용
   1. 정상 작동
   2. 최적화 기능의 부재로 또 다른 방법 몰색
3. sharp 라이브러리 제거 
   1. 해결 x

 

해결

next/Image에서는 다운로드한 걸 자기 저장소에 저장하고, 앱이 그 저장소를 바라보도록 되어있다.

s3에 올라간 이미지를 바로 다운로드하면 될 것 같은데, 그것보다는 다운로드 방식을 바꾸기로 했다.