오늘의 한 일
- 프로젝트 대비 drf 프로젝트 만들어보기(백엔드 / 프론트엔드)
- 프론트엔드에서 db에 저장된 이미지 가져오기
대충 구상해본 index화면 - created_at 순으로 만들어진 유화 정렬
카드 형태의 부트스트랩 div 안에 temp_html 지정해서 자바스크립트 돌리면 될듯
<div class="col">
<div class="card h-100">
<img src="{backend}/output_img.jpg"
class="card-img-top">
<div class="card-body">
<h5 class="card-title">{title}</h5>
<p class="card-text">{content}</p>
</div>
</div>
</div>뭐 이런 형식으로?
이미지 게시 박스창도 심플하게 구상만 해놨는데 모달창으로 만들면 괜찮을듯
db에 저장된 이미지 파일 프론트엔드에서 받아서 띄워주기
참조 : https://www.inflearn.com/questions/307133
image 전송과 함께 데이터는 json으로 보내고 싶은 경우 - 인프런 | 질문 & 답변
restAPI에서 image 와 함께 데이터를 같이 보낼때, 보내려는 데이터가 많이 복잡할 경우에는 json으로 보내는 것이 좋을 것 같아 json으로 보내는 방법을 시도해봤는데요 @RequestPart DTO dto 이런식으로
www.inflearn.com
참조2 : https://t4716.tistory.com/29
JSON으로 이미지를 전달하려면 어떻게 할 것인가?
남세동님의 질문 2번. JSON으로 이미지를 전달하려면 어떻게 할 것인가?와 하위 질문 a, b를 알아보자. JSON형식은 xml에 뒤이어 발표된 표준형식으로 서버-클라이언트가 텍스트로 데이터를 주고받
t4716.tistory.com
1. 분리 요청
이미지만 AJAX등을 통해서 별도 요청으로 먼저 서버에 전송.
서버는 이미지를 저장하고, 저장된 이미지의 id(또는 파일명)를 클라이언트에 전송한다.
클라이언트는 이미지의 id와 전송할 데이터를 application/json으로 전송한다.
2. base64 인코딩
이미지를 base64로 인코딩해서 application/json으로 전송할 데이터와 base64로 인코딩된 이미지를 함께 전송.
1번으로 이미지만 따로 모델에 저장한 뒤에 article 모델에는 파일 경로를 넣어서 json을 통해 받은 뒤 img src 태그로 적용시키면 될 듯 합니다