[CHAM] image 올리기

백엔드에서 multer를 이용해서 이미지를 저장후 프론트에서 불러오려고 했다.

하지만 react에서 상대경로로 backend 폴더의 이미지 경로를 불러오지 못했다.

react에서는 public폴더를 제외하고 src폴더 외부의 파일을 불러오지 못한다는것을 검색하며 알아냈다.

그래서 multer의 저장장소를 front의 public 폴더에 저장했다.

그렇게 src="절대경로" 로 불러 왔는데 어딘 되고 어딘 안나와서 구글링을 했다.

그 결과 절대경로 앞에 "/" 를 붙여줘서 public 폴더라는 표시를 해줘야 했다.

 

이미지 경로를 불러오는 걸 구글링하며 이미지 src를 불러오는 방법이 4가지가 있다는 것을 알게되었다.

 

1. public 폴더에 저장후 절대경로

public 폴더에 imgs폴더를 만들어 이미지들을 저장한다.

<img src="/imgs/defaultImage4.jpg" />

그리고 위와 같이  경로를 설정해준다.

앞에 "/"를 붙여 public 폴더로 들어가준것이다.

"./"를 붙인다면 src폴더를 잡아준다고 한다.

 

2. import

import image1 from '../../public/imgs/defaultImage.png'

이런식으로 절대경로든 상대경로든 경로를 통해서 import 시켜준다.

<img src={image1} />

그다음 src를 해당 변수로 잡아주면 된다.

 

3. require

require를 사용하는 방법도 import와 비슷하다.

require함수안에 경로를 적어주고 뒤에 default를 붙여주면 된다.

<img src={require('../../public/imgs/defaultImage.png').default} />

4. 외부 url 절대경로

외부 url경로는 원래 쓰던데로 써주면 된다.

<img src="해당경로" />