How to display an image in react from PostgreSQL

Question

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

log data.result is

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?

What a nice surprise, 6 months later!

Andy Ray
– Andy Ray

2018-06-22 09:21:55 +00:00
Commented Jun 22, 2018 at 9:21 — Andy Ray
– Andy Ray, Commented Jun 22, 2018 at 9:21

Andy Ray · Accepted Answer · 2018-01-07 18:37:40Z

4

Base64 encode it when retrieving it from Postgres:

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

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

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

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

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

edited Jan 7, 2018 at 18:37

answered Jan 7, 2018 at 18:35

Andy Ray

32.3k16 gold badges114 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jadlmir Over a year ago

this is how i got it from the db

jadlmir Over a year ago

db.any('SELECT * FROM hairdressers WHERE id = $1',[32]).then(function(data) { console.log(data); res.json(data) }).catch(function(error) {})

Victor Carnarvaro · Accepted Answer · 2018-08-28 15:37:03Z

-1

If you want to handle the transformation on the client side:

Using a base64 string as data URI

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

Using URL.createObjectURL from the URL Web API to create a src url

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

However, the latter method needs you to clean up by invoking URL.revokeObjectURL to free resources associated with the created url. Though, it is automatically cleaned when the page reloads or is closed.

answered Aug 28, 2018 at 15:37

Victor Carnarvaro

1

Collectives™ on Stack Overflow

How to display an image in react from PostgreSQL

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related