이미지 경로 설정 질문입니다!

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

작성

530

안녕하세요! 현재 강의 듣고 따라해보고 있습니다. (좋은 강의 감사드려요!!)

다름이 아니고, multer 를 이용하여 이미지 업로드까지는 성공하였는데

이미지를 html에서 불러오려고 하니 계속 엑박만 떠서요 ㅠㅠ

제 폴더구조는 아래와 같습니다.

my project

- client

- server

- uploads (이 곳에 파일들이 저장되어있음)

my project > server > index.js 파일에

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

이 코드는 추가를 해놓았고요.

my project > client > src > components > views > LandingPage.js 파일에서

<img src={`localhost:3000/${item}`} alt="thumbnail"/>

이미지 파일을 위와 같이 불러오려니 정상적으로 나오지가 않아요. 어떤 부분이 문제일까요 ? ㅠㅠ

답변 4

질문자

말씀해주신것처럼 하면 파일 경로가 'http://localhost:3000/localhost:8080/uploads' 이렇게 됩니다 ㅠㅠ

지식공유자

서버 주소가 8000번이면 <img src={`localhost:8000/${item}} /> 이렇게 해주셔야 합니다 ~

질문자

변수 값이 이미 /uploads/itemName 로 나오는데 이미지는 못불러와요 ㅠㅠ

주소창에 localhost:3000/uploads/itemName 이렇게 그냥 입력해도 이미지는 아예 안나오고요~

어떤게 잘못됐을까요 ? ㅠㅠ

+ 서버 주소는 8000번인데 주소창에

localhost:8000/uploads/itemName

이 경로에서는 이미지가 정상적으로 나오고,

클라이언트에서는 여전히 안나오네요 .. 뭐가 잘못됐을까요~~?ㅠㅠ

지식공유자

혹시 item 저 변수 값이 어떻게 나오나요 ?

만약 저 변수 값이 이미 /uploads/itemName 이렇게 나온다면 localhost:5000/${item}

이렇게 해주시고 아니라면 localhost:5000/uploads/${item} 이렇게 해주세요 그리고 5000번은 노드 서버가 5000번 일때
5000번을 해주시면 됩니다.

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