react & node.js 개발 -static 이용해서 클라이언트에서 서버의 이미지 파일 접근하기-

서버에서 클라이언트로 이미지를 보내는 방법은 여러가지 있는 것 같은데... static을 명시해서 접근하는 방법을 일단 기술

 

1. static 명시하기

 

일단 express 서버에서 이미지가 저장된 파일을 static으로 명시해줘야한다

 

app.use('/images',express.static('./images'));

 

여기서 app.use(~) 부분에는 api 주소 쓰듯이 ./images 말고 /images라고 써줘야 에러가 없고

 

express.static(~)에는 상대경로 쓰듯이 './images'라고 써준다

 

 

2. 클라이언트에서 접근

 

그런 다음에 접근하는 하나의 예시로

 

실제 서버 주소 + 이미지 파일 경로를 img 태그의 src에 넣어주면 접근할 수 있다

 

<img src={`http://localhost:3001/images/output.jpg`}/>

 

3. react public 폴더의 이미지 접근

 

public 폴더 내에 images라는 폴더를 만들어둔다면..

 

'/images/~.jpg'로 바로 접근 가능하다

 

<img src = "/images/default_image.png"/>

 

 

 

참조

 

https://hojung-testbench.tistory.com/entry/NextJS-Express-Express%EC%97%90-%EC%A0%80%EC%9E%A5%EB%90%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0-%EC%99%B8%EB%B6%80-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0

[NextJS + Express] Express에 저장된 이미지 불러오기 (외부 이미지 불러오기)

 

https://velog.io/@haesoohaesoo/React-CRA-public

React | CRA 에서 public 폴더 접근하기