如何在 PostgreSQL 的反应中显示图像答案

【问题标题】：How to display an image in react from PostgreSQL如何在 PostgreSQL 的反应中显示图像
【发布时间】：2018-06-16 20:05:45
【问题描述】：

该应用程序是关于使用 HTML 从用户那里获取图像，通过 API 发送，然后将其添加到数据库中，并将其保存为 bytea。

问题是我无法在需要时显示图像。

主页是我需要显示图像的地方。

axios.get('http://localhost:3333/api/getAllHairdressers').then((result)=>{
  console.log(result.data);
  this.setState({data:result.data})
})
}

log data.result 是

counter : 1 cutprice : null description : null id : 32 image : {type: “缓冲区”，数据：数组（438763）}位置：空密码：“123” salname : null 用户名 : "ttt"

那么我该如何展示这张图片呢？我需要使用什么？

【问题讨论】：

【解决方案1】：

从 Postgres 中检索它时对其进行 Base64 编码：

SELECT ENCODE(byteaColumn,'base64') as base64 FROM...;

然后使用base64数据的URL放到img标签中：

<img src={`data:image/jpeg;base64,${this.state.data}`} />

如果您无法修改您的数据库查询，您可以在 Javascript 中对缓冲区进行 base64 编码：

this.setState({data: result.data.toString('base64')});

【讨论】：

这就是我从数据库中得到它的方式
db.any('SELECT * FROM hairdressers WHERE id = $1',[32]).then(function(data) { console.log(data); res.json(data) }) .catch(函数(错误) {})

【解决方案2】：

如果你想在客户端处理转换：

使用 base64 字符串作为数据 URI

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

使用来自 URL Web API 的 URL.createObjectURL 创建一个 src url

<img src={URL.createObjectURL(new Blob([Buffer.from(this.state.data)], {'type': 'image/png'}))} />

但是，后一种方法需要您通过调用 URL.revokeObjectURL 来清理与创建的 url 关联的资源。但是，当页面重新加载或关闭时，它会自动清除。

【讨论】：