AWS S3 이미지 깨지는 현상

AWS S3 이미지가 깨지는 경우가 여러가지가 있겠지만,

제가 프로젝트하면서 깨진 경우의 가정은 아래와 같았다.

• 이미지를 S3에 올렸을 때 return 되는 객체 URL을 직접적으로 호출하여 사용하지 않음
• 데이터베이스 상에 원본이미지명, Bucket명, Bucket의 위치만 저장하였음

즉, 이미지를 불러오기 위해서는 데이터베이스에 저장되어있는 원본이미지명과 Bucket명, Bucket의 위치만의 정보로

S3에 있는 이미지를 가져와야했다.

 

여기서 모든 이미지가 깨진 것은 아니고 특정 몇 개의 이미지만 깨지는 것을 확인하고,

깨지는 이미지의 공통점을 찾다보니 원본이미지명에 한글이 포함되어있다는 공통점을 찾게 되었다.

 

Bucket의 저장되어있는 한글은 인코딩이 되어있는데,

다운로드하려고 요청하는 URL 자체에는 인코딩이 되지않은 즉 한글 그대로로 요청하기 때문에

같은 이미지를 찾지 못했고 결국에는 없는 이미지이기 때문에 깨지는 현상이 발생한 것이다.

 

결국 필요한 것은!! 파일 이름 인코딩하기!

javascript 에서 파일을 넘겨주고 있어서 javascript 에서 encodeURIComponent(문자) 함수를 사용하여 인코딩했다.

 

ex) https://public-bucket.s3.ap-northeast-2.amazonaws.com/image/이미지 테스트입니다.png

 

let imgURI = encodeURIComponent(
	"https://public-bucket.s3.ap-northeast-2.amazonaws.com/image/이미지 테스트입니다.png"
);

$('#img').attr("src", imgURI);

위의 내용처럼 인코딩을 했는데도 이미지가 잘 뜨지 않아서 확인해보니 aws 에서 인코딩하는 방식이랑 제공해주는 encodeURIComponent를 통해서 인코딩을 할 때 띄어쓰기 인코딩이 약간 상이한 것을 확인할 수 있었다.

AWS S3 : "+"

encodeURIComponent : "%20"

 

그래서 %20은 +로 치환해주는 로직이 추가적으로 필요했다.

결국 사용한 최종 소스는 아래와 같다.

let imgURI = encodeURIComponent(
	"https://public-bucket.s3.ap-northeast-2.amazonaws.com/image/이미지 테스트입니다.png"
).replaceAll("%20", "+");

$('#img').attr("src", imgURI);

 

해결 완료!