Solution 1 :

In case you are using axios don’t forget to add the ‘responseType’, in other case it doesn’t work.

  .get(endpoint, {
    headers: { Authorization: 'xxxxxxxxxxxx' },
    responseType: "arraybuffer",
  .then((response: any) => {
    let data = `data:${
    };base64,${new Buffer(, "binary").toString("base64")}`;

Solution 2 :

use the image base source

constructor(props) {
   this.state = {
      imgSrc: '',
componentDidMount() {
    fetch('http://localhost:8181/images/appliance-OTHER.svg', {
         method: "GET",
         headers: { Authorization: 'Bearer eyJhbGciOiJIU' }
    }).then((response) => {
        const data = `data:${response.headers['content-type']};base64,${new Buffer('base64')}`;
            this.setState({ imgSrc: data });
render() {
  const { imgSrc } = this.state;
  return (
     <img src={imgSrc} alt="love is gone" />

Problem :

I’m trying to find a way to display the image in my react app. The image I need requires a bearer token, in other words When I access this image, I need to pass a header with the bearer token. I’m moving from react-native to react, so in react-native, I can directly give header in Image component, but it seems like I can’t pass header in img tag which is html tag. So my question is how to display an image that required bearer token to access it in react.


Comment posted by Alex Yepes

Any way you can share your get request? Are you using Axios? Please put some code so we can have a look at what your problem might be

Comment posted by Someone Special

so heartbreaking