[Day 29] 이미지 다운로드 문제 해결

백엔드에서 이미지 링크를 보내줄 때, 아래와 같은 url로 보내줬다.

/media/user_images/%EC%9D%B4%EB%AF%B8%EC%A7%801_l94F02q.jpg

 

나는 리액트에서 이미지 다운로드를 a태그를 통해 구현하고 있었는데, 위와 같은 링크는 다운로드가 안되고 그저 새 탭에서 열리기만 했다.

이 문제를 해결하기 위해 열심히 구글링을 해보았으나, 저 url로는 도저히 다운로드를 할 방법을 찾지 못했다.

 

url을 고치지 않고서는 다운로드할 방법이 없다면, url을 바꿔버리면 된다.

예전에 Base64 이미지 링크였을 때는 문제없이 다운로드가 되었던 기억이 떠올랐다.

그래서 나는 저 링크로 사진을 불러와서, canvas에 사진을 그리고, 그다음에 그 canvas를 base64로 인코딩하여 download버튼에 링크를 넣어주었다.

약간 너무 얼레벌레 코드를 구현한 것 같지만, 일단 돌아간 것에 초점을 맞추기로 했다.

 

해결한 깃허브 링크: https://github.com/2022-SiliconValleyInternship-team-G/CarryCARI-FE/commit/822caff5d758cd3b09fecc43b7f05a667ef2a50f

feature: Fix download image function · 2022-SiliconValleyInternship-team-G/CarryCARI-FE@822caff

(관련 코드 해설은 프로젝트 끝나고 포스팅한 후에 링크를 걸겠다.)