이미지 파일을 서버에 올리고 그 올린 파일을 다시 출력하는 기능을 구현하고 싶었다.
일단 assets 폴더에 image 태그를 집어 넣고 이미지를 출력하는 것을 태스트 해봤다.
이미지 태그에 상대경로로 이미지를 연결해 주었는데
<img src='assets/images/1.jpg' alt="" />
이미지가 보이지 않았다.
찾아보니 이미지를 src 폴더 안에 저장하면 import 를 이용해야 한다고 했다.
그래서 이미지를 출력하는 tsx 파일 안에 와서
import sample from 'assets/images/1.jpg'
...
<img src={sample} alt="" />
이렇게 작성해 주니 잘 열린다.
나는 서버에서 이미지를 받아 올 예정이여서 절대경로로 이미지를 가져오는 방법이 필요했다.
https://i.picsum.photos/id/1028/200/300.jpg?hmac=Ka86H0yLDb-Ft8SNNKSVTSFylu-GfaEGBrS2AP01ZSM
위와같이 절대경로에 쌤플 이미지가 있어서 불러와봤다.
<img src='https://i.picsum.photos/id/1028/200/300.jpg?hmac=Ka86H0yLDb-Ft8SNNKSVTSFylu-GfaEGBrS2AP01ZSM' alt="" />
절대경로로는 이미지가 잘 불러와진다.