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

Question

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

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

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

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

记录 data.result 是

counter : 1 cutprice : null description : null id : 32 image : {type: "Buffer", data: Array(438763)} location: null password : "123" salname : null username : "ttt"

那么我怎么能显示这个图像呢？我需要使用什么？

Answer 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')});