在 react native 中显示用 base64 编码的图像答案

【问题标题】：Displaying images encoded with base64 in react native在 react native 中显示用 base64 编码的图像
【发布时间】：2020-09-20 01:02:15
【问题描述】：

我是原生反应新手，我正在尝试显示使用 base 64 编码的图像。

 <Image source={{uri: `data:image/png;base64,${element.img}`}}
                           style={{height: 200, width: null, flex: 1}}/>

这是我存储图像的猫鼬方案

 img: {
    data: Buffer,
    contentType: String,
},

这就是我将它们保存到数据库的方式（photoData 包含 img）：

this.setState({img:data.base64})
axios.post('uri', photoData, config)

这是我的图像数据：img data

数据作为缓冲区返回，所以使用这个

data:image/png;base64,${element.img}

不工作。我尝试使用 Buffer.from('','base64').toString('ascii') 但仍然没有显示图像。

【问题讨论】：

标签： react-native base64

【解决方案1】：

您的响应是一个缓冲区对象，您必须使用以下代码转换为 base64 图像。

const data = Buffer.from(response, 'binary').toString('base64');

const base64Image = `data:image/png;base64,${data}`;

and then you can use the image normally
<Image source={{uri: base64Image}}/>

【讨论】：

我尝试了您的解决方案，但是，“第一个参数必须是类型字符串、缓冲区、ArrayBuffer、数组或类似数组的对象。收到的类型未定义”我收到此错误
您的对象中有缓冲区对吗？ img.data 根据你的图片最好试试
它说 'cannot read property 'data' of undefined' 。我认为它是一个嵌套对象，它无法访问图像下的数据。
您在屏幕截图中显示的对象有一个缓冲区更好地检查