如何在PostgreSQL中显示图像 [英] How to display an image in react from PostgreSQL

问题描述

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

The app is about taking an image from the user using HTML, sending it via API and then adding it to the db saving it as bytea.

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

The problem is that I cannot display the image when I need it.

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

The homepage is where I need to display the images.

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

日志数据。结果是

counter： 1 cutprice：空描述：空id：32图像：{type：
Buffer，数据：Array（438763）}位置：空密码： 123
salname：空用户名： ttt

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

那我怎么显示这张图片？
我需要使用什么？

So how could I show this image? What do I need to use?

推荐答案

从Postgres检索时使用Base64对其进行编码：

Base64 encode it when retrieving it from Postgres:

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

然后使用base64数据URL将其放入img标签：

Then use a base64 data URL to put it in an img tag:

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

如果无法修改数据库查询，则可以对Java缓冲区进行base64编码：

If you are unable to modify your DB query, you can base64 encode the buffer in Javascript:

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

这篇关于如何在PostgreSQL中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！