Blob 으로 img 태그 src 속성에 사용할 url 만들기(base64)

주로 이미지 태크에 src 속성에는 크게 3가지 방법으로 나타낼수 있다

 

1. 서버의 물리경로

2. api의 url

3. base64 방식 (api로 데이터 그자체를 가져온경우)

 

 

1번은 html, css로 퍼블리싱할때, 즉 하드 코딩할때

2번은 백엔드로부터 가져올때가되고

 

3번이 이 게시글의 목적이 되겠다

 

상황은 다음과 같다

 

프론트단 주로 js 확장자에서

 

브라우저에 내장된 fetch api를 이용하거나 (필자는 이방식을 좋아한다)

외부 라이브러리인 axios를 다운로드하여 api를 사용하거나

 

둘다 blob으로 리턴 받을 수 있는데 같이 사용하면 좋겠다.

 

api를 통해서 blob 형태로 가져왓다고 치자

 

 

이렇게 쓰면 될거다

function fnApi() {
  console.log('api 호출')
  const file = new Blob()
  return file;
}
 
 
function fnMakeImgTag() {
  // api 로 blob 를 얻었다고 가정
  const file = fnApi()
 
  const fileReader = new FileReader()
 
  // 이벤트 등록
  fileReader.onload = e => {
    const base64EncodeText = e.target?.result
 
    const html = `<img src="${base64EncodeText}" alt="" />`
    document.getElementById('targetId').innerHTML = html
  }
 
  fileReader.readAsDataURL(file)
}
 

 

 

파일(blob)을 base64 문자열로 인코딩하려면 시간이 소요되는데

그렇기 때문에 이벤트로 동작한다.

 

따라서 fileReader.readAsDataURL 을 호출하면 

이벤트가 호출되고

 

그 내부 로직에서 원하고자하는 코드를 작성하면된다

 

나는 샘플코드로 img 태그를 만들어 특정 id 적었는데

자식요소로 추가할 수 도 있고 다양하게 사용해보자

 

다음은 ProgressEvent 의 스펙이다

 

 

다음은 FileReader 의 스펙이다

 

 

 

두개를 합치면 e.target.result 의 타입이 string 일수도 있다는걸 알 수 있다