파일 src 경로 질문

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

multer를 이용하여 이미지 저장[삭제 예정]

작성

201

안녕하세요. 강사님.

아래 코드에 의해 웹 상에 이미지가 띄어지는데, 어떻게 localhost:5000/ 뒤에 바로 이미지 이름을 넣음으로써 접근이 가능한지요?

index.js나 routes 파일에서도 따로 설정해 준 부분이 없는 것 같은데, 어떻게 가능한지 궁금합니다.

<img style = {{ mindWidth: '300px', width: '300px', height: '240px'}}
                            src={`http://localhost:5000/${image}`}

nodejs react redux mongodb 웹앱

답변 3

John Ahn

지식공유자

네 맞습니다 ㅎㅎㅎ 사실 그부분은 제가 좀 후회하는 부분인데요 ... image에 파일이름만 넣었어야 했는데 ....
image안에 이미 uploads/ 부분이 들어있습니다 ~ !

Abraham

질문자

답변 감사합니다.

제가 궁금한 것은 강사님 말씀처럼 아래 코드 덕분에 localhost:5000/uploads/파일이름 으로 파일에 접근가능해야 한다고 생각하고 있었습니다.

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

그런데 아래 코드를 보면 localhost:5000/uploads/파일이름 아니라 http://localhost:5000/파일이름 으로 파일에 접근하는거 같은데 어떻게 되는 것인지요? 혹시 ${image} 가 'uploads/파일이름' 정보를 한번에 가지고 있는 건가요?

<img style = {{ mindWidth: '300px', width: '300px', height: '240px'}}
                            src={`http://localhost:5000/${image}`}

John Ahn

지식공유자

이 부분은 노드 js가 정적자료를 제공해주기 때문입니다.

node.js에

index.js 엔트리 파일을 보시면

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

이러한 코드가 있습니다.

이 코드가 말하는것은 /uploads 폴더 안에 있는 정적 파일들을 uploads 라는 경로를 이용해서 그러니깐

localhost:5000/uploads/ 파일 이름

이렇게 해서 가지고와 줄수 있다는 것입니다 ^^

수고하세요 ~ !

인프런 커뮤니티 질문&답변

파일 src 경로 질문