img tag 의 src 에 header 넣기

안타깝게도 그런 방법은 없다. 그럼 어떻게 해야할까?

img src 에 보안이 걸려있을 때 어떻게 이미지를 불러올 수 있을까?

이미지의 url이 특정 header 가 있어야만 접근이 가능한 경우, <img src="IMAGE_URL" /> 와 같은 방식으로는 이미지를 불러올 수 없다.

그렇다면 어떻게 해야할까? 해답은 의외로 간단하다. image url에 직접 http request를 보내고, response로 받은 이미지 데이터를 src 에 넣으면 된다.

다음 순서를 따라가보자.

fetch image!!

다음과 같이 이미지 URL 에 직접 axios 요청을 보낸다. 헤더를 잘못 작성한 것이 아니라면, response 가 200으로 올 것이다.
(이 때 responseType 을 blob 으로 해야 한다!!)

axios.get("IMAGE_URL", {
  responseType:'blob',
  headers: {
    someToken: 'TOKEN'
  }
})

createObjectURL

window.URL.createObjectURL 메소드를 이용하면 blob 데이터를 URL의 형식으로 변환할 수 있다.

const response = await axios.get("IMAGE_URL", {
  responseType:'blob',
  headers: {
    someToken: 'TOKEN'
  }
})
const imageURL = window.URL.createObjectURL(response.data)

src 변경

이제 변환된 imageURL 을 타겟 img 태그에 넣어주기만 하면 된다.

<img id="target-img" />

const response = await axios.get("IMAGE_URL", {
  responseType:'blob',
  headers: {
    someToken: 'TOKEN'
  }
})
const imageURL = window.URL.createObjectURL(response.data)
document.getElementById("target-img").src = window.URL.createObjectURL(response.data);

끝