Javascript

JS : blob 형태의 데이터 image url 변환

죽이죽이 2024. 1. 31. 18:03
  • blob 형태 데이터 url로 변환
※ blob 이란?
- Binary Large Object의 약자로, 이진 데이터를 나타내는 객체이다.

※ blob 형태로 이미지의 url을 저장하는 이유
- 이미지, 비디오, 사운드 등과 같은 멀티미디어 객체들을 저장하기위해 사용한다.

※ DB 테이블 image BLOB type 선언

※ 서버로부터 받아온 데이터 처리
const img = document.createElement("img");

// 응답 데이터를 Blob 형태로 변환
let blob = await fetch(`/images/${data.id}`).then((res) => res.blob());

// Blob 객체를 나타내는 유일한 URL 생성
blob = URL.createObjectURL(blob);

// 이미지 요소의 src 속성을 Blob URL로 설정하여 동적으로 생성된 이미지를 표시
img.src = blob;