如何在反应中显示base64图像？

Posted 2023-03-07

【中文标题】如何在反应中显示base64图像？

【英文标题】：How to show base64 image in react?

【发布时间】：2019-11-08 04:18:15

【问题描述】：

我将图像以 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);

【参考方案1】：

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

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

【讨论】：

试过了。什么都没有出现。它返回 。 this.state.image 中的值为“data:image/png;base64,iVBORw0KGgoAAAAN.......”

@Krazy 实际图像的 src 可能嵌套在响应 object

中

【参考方案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);

现在您可以使用保存在您所在州的这个网址作为图像的来源，如下所示：

<img src=this.state.image />

希望这会有所帮助！

【讨论】：

不工作。我正在从服务器获取准确的 base64 字符串。

@Karthi 我已经编辑了答案。试试看，让我知道。还要检查我用来创建 blob 的内容类型是否适用于 jpeg 图像。您可以使用 png 或 jpg 而不是 jpeg 来适应您的情况。

返回错误：在'Window'上执行'atob'失败：要解码的字符串没有正确编码。

你能给我你的api来返回这个结果吗？

我认为您从后端发送的文件可能存在问题。

【参考方案3】：

当您收到此错误时：

<img src="[object Object]">

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

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

检查结果是否为对象

【参考方案4】：

matias bustos 给出的答案只是你需要像这样将height 和width 添加到图像标签中才能正常工作：

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

【参考方案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格式的数据。