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;
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()
for string
<img src={`data:image;base64,${img}`} alt="img" />
another way for Objects like File and BLOB
const imgUrl = URL.createObjectURL(img);
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.