[React] React.js - Django REST framework API 사진 올리기 및 출력하기

Django

장고 설정은 이 글을 참고 바람

https://developer0809.tistory.com/104

[#. Django] Django admin/api(drf)에 image 업로드하고 react에서 image 불러오기

 

React.js

이미지 경로를 설정해주면 된다.

src={http://localhost:8000/letter/uploads/images/${currLetter.photoName}}

400 에러날 경우

-  localhost:8000 대신 127.0.0.1 사용하기

404 에러날 경우

- 장고 admin 페이지에 들어가서, 사진을 관리하는 DB가 어디인지 잘 파악해서 경로에도 반영해주어야 한다.

 

정리하자면, 이미지 경로는

'지금 쓰고 있는 로컬호스트 주소 / 사진 관리하는 장고 DB 이름 / 사진이 로컬에 저장되는 경로 / 사진 이름(확장자포함)' 이다.

ex) http://localhost:8000/letter/uploads/images/${currLetter.photoName}

 

참고로 내 작업 파일은 이렇게 구성되어 있다. 알아서 자신의 상황에 맞게 참고하기 바랍니당.