如何在React中显示Base64图片？

Question

我将图像以base64格式存储在节点中，然后接收并存储在变量中，并在标记中显示，但它没有显示。从服务器接收到正确的值。在渲染函数中，如果状态已设置，则条件为真。即使为真，它也不会显示。

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>: ''}
}

我得到了确切的Base64字符串并将其存储在服务器中。它返回：

<img src="[object Object]">

在 DOM 中，我不知道自己哪里出错了。

编辑

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);
        }
    })

});

模型

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

});

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

- Karthi

Answer 1

你确定在src属性中添加了编码类型和base64编码的值吗？

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

- Matías Bustos

---

尝试了一下，没有显示出任何内容。返回的是<img src="[object Object]">。在这个 this.state.image 中的值是"data:image/png;base64,iVBORw0KGgoAAAAN......."。 - Karthi

@Krazy，问题在于实际图像的src可能嵌套在响应object中。 - Lakshaya U.

Answer 2

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' });

一旦您获得了Blob，您需要将其转换为数据URL，如下所示：

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

现在，您可以使用保存在状态中的此URL作为图像源，就像这样：

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

希望这能帮到您！

- Harshit Agarwal

---

无法工作。我从服务器获取了完全相同的base64字符串。 - Karthi

返回错误：在“Window”上执行“atob”失败：要解码的字符串未正确编码。 - Karthi

我认为你从后端发送的文件可能存在问题。 - Harshit Agarwal

那么，这可能是从结果对象中提取的级别问题。尝试一些少一级过滤的组合。 - Harshit Agarwal

我没听懂你说的话。 - Karthi

Answer 3

当您遇到以下错误时：

<img src="[object Object]">

这意味着您要将一个对象插入到src中，而不是一个字符串。 我猜您的响应返回的是一个对象而不是字符串。

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

检查结果是否为对象

- user3266237

Answer 4

matias bustos 给出的答案是正确的，只需要在图片标签中添加 height 和 width，就像这样：

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

- Divjot Singh

Answer 5

您不能直接将base64字符串附加到图像源中。首先，您需要使用Buffer对其进行解码，然后将该数据附加到src中。

可以尝试以下方法。

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是以Base64格式编码的数据。

- Codemaker

---

对我不起作用。 - Priyen Mehta

嗨@PriyenMehta，你能否在这里检查一下错误。 - Codemaker

谢谢，但我用不同的方法解决了。 - Priyen Mehta