114. (TWOK/LOGIC) [Web] 자바스크립트 이미지 파일 http 요청 및 base64 형식 data url 포맷 이미지 태그 img src 설정 로직

---

[로직 정리]

​

정리 로직 : Web

​

상태 : [Web] 자바스크립트 이미지 파일 http 요청 및 base64 형식 data url 포맷 이미지 태그 img src 설정 로직

 

---

[설 명]

 

// --------------------------------------------------------------------------------------
[사전) 설정 및 정보 확인 사항]
// --------------------------------------------------------------------------------------

- 모바일 화면 기준 웹 프론트 제작 필요 (HTML , CSS , JS)

- http 요청을 하기 위한 ajax , axios , fetch 등 모듈 구현 필요

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[로직 설명]
// --------------------------------------------------------------------------------------

1. JS 에서 특정 이미지 파일 http 요청 수행 실시

  >> ex : http://dev.admin.co.kr/test/IMAGE_DATA/logo.png


2. http 통신 완료 후 response 응답에서 확인 된 이미지 파일을 base64 형식 data url 포맷으로 변경 수행

  >> ex : "data:image/png;base64,aAe346dferer000000==="


3. 변경 된 data url 형식 포맷은 로컬 스토리지 등에 저장 보관 수행


4. 이미지 태그 src 에 data url 형식 문자열 지정 수행 및 이미지 표시 확인


5. 페이지 전환 이후 다시 이미지 표시 화면 진입 시 http 재요청을 하지 않고 로컬 스토리지에 저장 된 값으로 이미지 표시

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

[document getElementById src 사용해 이미지 (img) 태그에 data url 지정 및 이미지 표시 실시]

https://blog.naver.com/kkh0977/222795200008?trackingCode=blog_bloghome_searchlist


[자바스크립트 - base64 인코딩 (encode) , 디코딩 (decode) 수행 실시 - btoa , atob]

https://blog.naver.com/kkh0977/222405417254?trackingCode=blog_bloghome_searchlist


[axios http get 방식 요청]

https://blog.naver.com/kkh0977/222750824165

// --------------------------------------------------------------------------------------

---