How to show base64 image in react?

Question

I am storing the image in a base64 format in a node. Then I am receiving it and storing in a variable. and show it in the tag but it is not showing. Correct values are receiving from server. In render, function condition is true if the state is set.even if its true its not showing.

getImage() {
    console.log('getImage');
    axios.get(`http://localhost:4000/image/get`).then((result) => {
        this.setState({ image: result })
        console.log(result);
    });
}

render(){
    {this.state.image ? <img src={this.state.image}></img>: ''}
}

I am getting exact base64 string which i am storing in the server.It returns

<img src="[object Object]">

in DOM.I don't know where am I going wrong

EDIT

router.route('/image/get').get((req, res) => {
    console.log('inside img get');
    Image.find((err, result) => {
        if (err) {
            res.json({ "error": true, "message": "error fetching data" });
        } else {
            // console.log(result);
            res.json(result);
        }
    })

});

model

const mongoose=require('mongoose');
const Schema=mongoose.Schema;
var ImageSchema=new Schema({
    imageName:{
        type:String
    },
    imageData:{
        type:String
    }

});

export default mongoose.model('Image', ImageSchema);

score 29 · Answer 1 · answered Jun 26 '19 at 09:17

29

Did you make sure to add the encoding type in the src attribute along with the base64 encoded value?

render(){
    {this.state.image ? <img src={`data:image/png;base64,${this.state.image}`}/>: ''}
}

answered Jun 26 '19 at 09:17

Matías Bustos

348
3
8

3

tried. nothing showed up.it returns . the value in this.state.image is "data:image/png;base64,iVBORw0KGgoAAAAN......." – Karthi Jun 26 '19 at 09:21
@Krazy the thing is that the *src* of the actual image might be nested in the response *object* – Lakshaya U. Sep 04 '21 at 07:18

Harshit Agarwal · Answer 2 · 2019-06-26T10:23:35.990

3

const byteCharacters = atob(result);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);

let image = new Blob([byteArray], { type: 'image/jpeg' });

Once you have the Blob you need to convert that into a data url like this:

let imageUrl = URL.createObjectURL(image);
this.setState({image: imageUrl});

now u can use this url saved in your state as a source for image like this:

<img src={this.state.image} />

Hope this helps!!

edited Jun 26 '19 at 10:23

answered Jun 26 '19 at 09:51

Harshit Agarwal

2,308
2
15
23

not working.I am getting exact base64 string from server. – Karthi Jun 26 '19 at 10:19
@Karthi i have edited the answer. try that and let me know. Also check the content-type that i am using to create blob is for jpeg image. You can use png or jpg instead of jpeg to suit your case. – Harshit Agarwal Jun 26 '19 at 10:24
return error :Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. – Karthi Jun 26 '19 at 10:32
Can you give me your api which returns this result? – Harshit Agarwal Jun 26 '19 at 10:34
i think there might be issue with the file that you are sending from your backend. – Harshit Agarwal Jun 26 '19 at 10:44
For getting base64 string I am doing result.data[0].imageData.so that I am getting only base64 string of that image.I am receiving exact base64 .but in dom its [object object] – Karthi Jun 26 '19 at 11:00
then, this might be on the level of extraction from the result object. Try some combinations with one level less filtering. – Harshit Agarwal Jun 26 '19 at 11:04
I didn't get what you said – Karthi Jun 26 '19 at 11:07
what i meant is check if wrapping your imageData into an array (or extracting it out from array if it is already wrapped) before sending it works! – Harshit Agarwal Jun 26 '19 at 11:31

score 2 · Answer 3 · answered Nov 09 '20 at 00:19

When you get this error:

<img src="[object Object]">

this means you insert an object to the src instead of a string. my guess is that your response returns an object and not string

 axios.get(`http://localhost:4000/image/get`).then((result) => {
        this.setState({ image: result })
        console.log(result);
    });

check if the result is an object

score 1 · Answer 4 · edited Dec 25 '20 at 03:31

1

The answer given by matias bustos works correctly only just that you need to add height and width to the image tag like this:

render(){
   {this.state.image ? 
      <img width='500' height='200' src={`data:image/png;base64,${this.state.image}`}/>: 
   ''}
}

edited Dec 25 '20 at 03:31

F Blanchet

1,430
3
21
32

answered Dec 24 '20 at 16:49

Divjot Singh

21
4

score 1 · Answer 5 · answered Mar 30 '21 at 13:54

1

You can't directly append base64 string to image source. First you have to decode it using Buffer then append that data in the src.

Try like this.

decodeBase64(base64data) {
    let base64ToString = Buffer.from(base64data, "base64").toString()
    this.setState({data: base64ToString })
}

render() {
    return (
       <img src={"data:image/jpeg;base64," + this.state.data} />
    )
}

base64data is the data in base64 format.

answered Mar 30 '21 at 13:54

Codemaker2015

12,190
6
97
81

Not working for me. – Priyen Mehta Dec 20 '22 at 05:22
Hi @PriyenMehta, Could you please ping the error here. – Codemaker2015 Dec 20 '22 at 13:38
1

Thanks, But i solved it in different way. – Priyen Mehta Dec 21 '22 at 05:11

How to show base64 image in react?

5 Answers5

Linked