如何在屏幕上显示 Axios 请求返回的图像？

Question

I'm trying to build a component that receives from an axios authenticated route an image, an then display it on screen, but I don't know how to handle the axios response in order to make it work.

the code so far:

    import React, {useEffect} from 'react';
import axios from 'axios'

export default function TesteImagens() {

const[img, setImg] = React.useState('')

useEffect(async ()=>{
    const token = JSON.parse(localStorage.getItem('Token'))
    const config = {
      headers: { Authorization: `Bearer ${token}` }
    };
    console.log(config)
    const imgData = await axios.get('http://127.0.0.1:3333/imagem/1610978351872-download.jpg-undefined.jpeg', config)
    console.log(imgData)
    setImg(imgData)
}, [])    

    return (
        <div>
            
        
           
        </div>
    );
}

While i was searching for an answer i found this code, but i don't know exactly how to use it:

function getBase64(url) {
  return axios
    .get(url, {
      responseType: 'arraybuffer'
    })
    .then(response => Buffer.from(response.data, 'binary').toString('base64'))
}

Answer 1

Try this code:

useEffect(() => {
    const token = JSON.parse(localStorage.getItem('Token'))
    const config = {
      headers: { Authorization: `Bearer ${token}` }
    };
    axios.get('http://127.0.0.1:3333/imagem/1610978351872-download.jpg-undefined.jpeg', config).then(response => {
        setImg(response.imgData)
    })
}, []) 

return (
  <div>
    <img src={img} />
  </div>
)

Suppose that imgData is in the json from the response