How to convert a blob string to image in react-CodePudding

I'm working on a react program to get an image from the backend and display it in the frontend. The API call is working fine and I'm able to get the image preview in the postman while testing the API. But I couldn't convert it into an image in the front end.

Below is the response I received from the backend:

{data: '����\x00\x10JFIF\x00\x01\x01\x01\x00H\x00H\x00\x00��\x02(ICC_PROFILE\x00\x01\x01\x00\x00\x02\x18\x00\x00\x00\x00\x02\x10\x00\x00…��M�M�2(݃\x04�#�ɤ�j7�\x02�W\x137�1x�-��.b[�Y���7%���];�H��', status: 200, statusText: '', headers: {…}, config: {…}, …}

Here data is the string version of the image and I need to convert it to an image in the frontend. Below is my frontend code:

import './App.css';
import axios from 'axios';
import React, {useState, useEffect} from 'react';

function App() {
  const[imageUrl, setImageUrl] = useState('')

  useEffect(() => {
    axios.get('http://localhost:8080/userImage/[email protected]/download/', {
      headers: {
      }
    })
    .then(response => {
      console.log(response)
      const url = URL.createObjectURL(response.data);
      setImageUrl(response.data)
      console.log(url)
    })
    .catch(err => {
      console.log(err)
    })
  },[])

  return (
    <div className="App">
      <img src={imageUrl} alt="Image Placeholder"/>
    </div>
  );
}

export default App;

CodePudding user response：

I am not sure if you are using response type or not. You need to specify response type as blob

return axios
    .get(url, {
      responseType: 'blob'
    }).then()

CodePudding user response：

for string

<img src={`data:image;base64,${img}`} alt="img" />

another way for Objects like File and BLOB

const imgUrl = URL.createObjectURL(img);

CodePudding user response：

It seems you are passing a string to URL.createObjectURL(). According to the docs you should instead be passing an object; more specifically either a File, Blob or MediaSource object.

I spent some time coming up with a solution and though I suspect it is not the most efficient it does at least work :)

On the backend make sure to send a base64 string:

const fs = require('fs');
const path = require('path');

app.get('/photo-test', async (req, res) => {
  let base64 = await fs.readFileSync(path.join(__dirname, "photos", "testPhoto.png"), 'base64'); //change the path to your specific photo
  res.status(200).send(base64).end();
});

Then in react convert the base64 string into a new Blob and use that for URL.createOjectURL([new Blob]).

const [imageUrl, setImageUrl] = useState('')

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount;   sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin   sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0; offset < end;   i,   offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

useEffect(() => {
    axios.get('http://localhost:5000/photo-test', {
        headers: {
        }
    })
        .then(response => {
            const blob = base64toBlob(response.data);
            const url = URL.createObjectURL(blob);
            setImageUrl(url)
        })
        .catch(err => {
            console.log(err)
        })
}, [])

return (
    <div className="App">
        <img src={imageUrl} alt="Image Placeholder" />
    </div>

Note the new function base64toBlob taken from this stack overflow post.