Question

我将图像以base64格式存储在节点中。然后，我将其接收并存储在变量中。并在标签中显示它，但未显示。从服务器接收到正确的值。在渲染过程中，状态设置为true时，函数条件为true，即使状态为true也不显示。

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

Answer 1

您确定要在src属性中添加编码类型以及base64编码值吗？

str.length()+1

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，您需要将其转换为如下所示的数据网址：

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

现在您可以使用保存在您的状态中的该网址作为图像的来源，

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

希望这会有所帮助！

Answer 3

出现此错误时：

<img src="[object Object]">

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

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

检查结果是否为对象

Answer 4

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

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

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 格式的数据。

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

5 个答案: