AWS 이미지 url 가져올때 이미지 깨짐 해결

프론트엔드에서 s3에 이미지 파일을 업로드하고, 업로드한 url을 가져와서 미리보기를 통해 렌더했다.

 

근데 요청도 잘 오는데 , s3주소에 들어가보면 깨진 이미지로 보이고, 

UI에도 렌더가 깨진이미지로 되어있었다. 

 

s3주소에서 깨진이미지여서 s3에 저장할때 (이미지를 업로드할때)문제가 있을거라고 생각했는데

 

구글링한 후 한글 파일 이름 때문이라는것을 알게되었다.

 

찾아보니, 

'cat.jpg' => 'https://s3버킷주소.../cat.jpg'
'고양이.jpg' => 'https://s3버킷주소.../%EA%B3%A0%EC%96%91%EC%9D%B4.jpg'

이런식으로 파일이름을 받아서

url주소로 인코딩하는 과정에서 한글을 저렇게 바꾸어 놓는것이였다. 

 

그래서 한글이름을 그대로 사용하려면, 인코딩된 주소를 `utf-8` 디코딩을 사용해서 가져와야한다

 

 ✨ const encodeUrl = (url: string) => {
    try {
      return encodeURI(url);
    } catch (error) {
      console.error("URL 인코딩 실패:", error);
      return "";
    }
  };
  
  .
  .
  .
  
   return (
    <ImageSection imageUrls={imageUrls} encodeUrl={encodeUrl} />
    
    )

 

 const ImageSection=(...)=>{
    	.
        .
        <Image
                ✨src={encodeUrl(url)}
                alt={`이미지 ${index + 1}`}
                layout="fill"
                objectFit="cover"
                unoptimized
              />
              }

 

----

https://velog.io/@asaei623/s3-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%8C%8C%EC%9D%BC-url%EC%9D%84-%EA%B0%80%EC%A0%B8%EC%98%AC-%EB%95%8C-%ED%95%9C%EA%B8%80%EB%A7%8C-%EC%98%A4%EB%A5%98%EB%82%98%EB%8A%94-%EC%9D%B4%EC%9C%A0