[6/4 TIL] react img 경로(상대경로, 절대경로)

kind J·2022년 6월 4일
0
post-thumbnail

이미지 파일을 서버에 올리고 그 올린 파일을 다시 출력하는 기능을 구현하고 싶었다.

일단 assets 폴더에 image 태그를 집어 넣고 이미지를 출력하는 것을 태스트 해봤다.

1. 상대경로로 이미지 import 해서 가져오기

이미지 태그에 상대경로로 이미지를 연결해 주었는데

<img src='assets/images/1.jpg' alt="" />

이미지가 보이지 않았다.

찾아보니 이미지를 src 폴더 안에 저장하면 import 를 이용해야 한다고 했다.

그래서 이미지를 출력하는 tsx 파일 안에 와서

import sample from 'assets/images/1.jpg'
...

<img src={sample} alt="" />

이렇게 작성해 주니 잘 열린다.

2. 절대경로로 이미지 가져오기

나는 서버에서 이미지를 받아 올 예정이여서 절대경로로 이미지를 가져오는 방법이 필요했다.

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="" />

절대경로로는 이미지가 잘 불러와진다.

profile
프론트앤드 개발자로 일하고 있는 kind J 입니다.

0개의 댓글