How to convert a blob string to image in react

Question

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/userthree@email.com/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;

score 0 · Answer 1 · answered Feb 24 '22 at 06:57

0

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()

answered Feb 24 '22 at 06:57

Vipul waghmare

26
5

I checked with that and it's still same – Thiluxan Feb 24 '22 at 07:12
I just saw you didnt put setImageUrl as url. const url = window.URL.createObjectURL( new Blob([response.data], { type: "image/jpg" })); setImageUrl(url) – Vipul waghmare Feb 24 '22 at 08:10
1

I'm getting blob:http://localhost:3000/0c1b35ea-101f-4840-bd6f-e4997053510d this as the url and still, it doesn't display the image if I add as the src value in – Thiluxan Feb 24 '22 at 10:35

score 0 · Answer 2 · answered Feb 24 '22 at 07:26

0

for string

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

another way for Objects like File and BLOB

const imgUrl = URL.createObjectURL(img);

answered Feb 24 '22 at 07:26

anks_patel

36
3

pr0grara · Answer 3 · 2022-03-03T23:01:10.973

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.

How to convert a blob string to image in react

3 Answers3