Displaying an image from a Postgresql database in the browser with javascript

Question

I have stored an image in a postgresql database and i have accessed that picture from database with Node.js and displayed it on the browser with

res.send(`<img src="data:${mimeType};base64,${b64}" />`);

but now i have set up a miniature REST API that only serves that picture but i do not know where to go about it, i have tried sending the whole encoded data like (src = "data:image/png;base64,......)) and then creating an IMG element and making the src of that image with that data. i am in the dark here, any help would be appreciated

app.get('/', async(req,res) => {
  try {
    const query = await pool.query("SELECT * FROM picture");
    console.log(query.rows)
    const buff = query.rows;
    const b64 = buff[0].image.toString('base64');
    const src = "data:image/png;base64,"+b64;
    res.setHeader('Content-type', 'image/png');
    res.send(src);
  } catch (e) {
    console.log(e.message)
  }

})

A base-64 encode Data URI is not of Content-type: image/png. After this header, you need to send the actual binary image data. — C3roe
– C3roe, Commented May 9, 2022 at 14:38
That one. But you should not send data after it, that is something different. (Trying to serve a data URI over HTTP directly makes little sense.) — C3roe
– C3roe, Commented May 9, 2022 at 14:41
so how do i display the picture from the database to my app? — Falconcode
– Falconcode, Commented May 9, 2022 at 14:46
You need to output the raw binary image data you have stored in your database after this header, and not something "encoded" any other way. — C3roe
– C3roe, Commented May 9, 2022 at 14:47

Falconcode · Accepted Answer · 2022-05-10 19:44:36Z

0

After discussion with a lot of good guys from here, i found the problem. I did not need to convert image data from the database to base64 format, i can directly serve the image as it's original binary format but have to indicate this header:

res.setHeader('Content-type:', 'image/jpg');

and if i need to use that image in my html i just do this:

<img src="/path to api /" />

answered May 10, 2022 at 19:44

Falconcode

276 bronze badges

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

Comments

Artash Grigoryan · Accepted Answer · 2022-05-10 09:41:30Z

-1

Change your route name to /picture, and after You can directly put the url of your route in your html img tag src like <img src='/picture'>

Replace here the img string with your fetched string from DB: take a look here for working example

app.get("/picture", async (req, res) => {
  let img =
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAADMElEQVR4nOzVwQnAIBQFQYXff81RUkQCOyDj1YOPnbXWPmeTRef+/3O/OyBjzh3CD95BfqICMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMO0TAAD//2Anhf4QtqobAAAAAElFTkSuQmCC";
  img = Buffer.from(img.split(",")[1], "base64");
  res.writeHead(200, {
    "Content-Type": "image/png",
    "Content-Length": img.length
  });
  res.end(img);
});

edited May 10, 2022 at 9:41

answered May 9, 2022 at 14:35

Artash Grigoryan

213 bronze badges

2 Comments

Falconcode Over a year ago

<img src='localhost:3000/picture'> i did that, it still does not work and yes i changed the url to app.get('/picture/', ....).

Artash Grigoryan Over a year ago

Take a look once again I edited my answer to be more explicit, you have a problem in how you serve your image

Collectives™ on Stack Overflow

Displaying an image from a Postgresql database in the browser with javascript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related