React + TypeScript에서 Axios로 Blob 이미지를 받기

React+TypeScript에서 axios를 사용해 blob 이미지를 받아보쟈

response type 설정

Blob으로 responseType을 설정해준다.

axios.get<Blob>( imgurl, { headers, responseType: 'blob' })

reponse 가공

File, FileReader를 통해 reponse를 가공해준다.

.then(res => {
  const myFile = new File([res.data], 'imageName')
  const reader = new FileReader()
  reader.onload = ev => {
    const previewImage = String(ev.target?.result)
    setMyImage(previewImage) // myImage라는 state에 저장했음
    }
  reader.readAsDataURL(myFile)

})

img에 넣기

src에 가공한 데이터를 넣어준다.

<img src={`${myImage}`} style={{ width: "500px", height: "500px"}} />

최종 코드

export default function MyComponent (): ReactElement {
	
    ...  
    axios.get<Blob>( imageUrl, { headers , responseType: 'blob'})
      .then(res => {
        const myFile = new File([res.data], 'imageName')
        const reader = new FileReader()
        reader.onload = ev => {
          const previewImage = String(ev.target?.result)
          setMyImage(previewImage) // myImage라는 state에 저장
        }
        reader.readAsDataURL(myFile)

      })
      .catch(
      	// 에러났을때
      })

    ...

	return (
  	...
  	  <img src={`${myImage}`} style={{ width: "500px", height: "500px"}} />
  	...
)

헤더를 넣어야해서 axios로 한번 받아봤다.