如何在react中显示 base64 图像？

IT技术 node.js reactjs mongodb base64
2021-04-21 20:39:33

我将图像以 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.I 不知道我哪里出错了

编辑

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);
5个回答

您是否确保在 src 属性中添加编码类型以及 base64 编码值？

render(){
    {this.state.image ? <img src={`data:image/png;base64,${this.state.image}`}/>: ''}
}
@Krazy 问题是实际图像的src可能嵌套在响应对象中
2021-06-05 20:39:33
试过了。什么也没显示。它返回 <img src="[object Object]">。this.state.image 中的值是“data:image/png;base64,iVBORw0KGgoAAAAN ......”
2021-06-08 20:39:33 
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} />

希望这可以帮助！！

不工作。我从服务器获取精确的 base64 字符串。
2021-05-26 20:39:33
@Karthi 我已经编辑了答案。试试看，让我知道。还要检查我用来创建 blob 的内容类型是否用于 jpeg 图像。您可以使用 png 或 jpg 而不是 jpeg 来适应您的情况。
2021-05-26 20:39:33
你能给我你的 api 返回这个结果吗？
2021-05-31 20:39:33
我认为您从后端发送的文件可能有问题。
2021-06-13 20:39:33
返回错误：无法在“窗口”上执行“atob”：要解码的字符串未正确编码。
2021-06-19 20:39:33

当您收到此错误时：

<img src="[object Object]">

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

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

检查结果是否为对象

matias bustos 给出的答案仅在您需要像这样添加height和添加width到图像标签时才能正常工作：

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

您不能直接将 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 格式的数据。

其它你可能感兴趣的问题
上一篇ReactJS - SCRIPT1010：预期标识符 - 生产版本未在 IE11 上运行 下一篇如何使用 webpack 在 React 中加载本地视频？