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

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

})

CodePudding user response：

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 /" />

CodePudding user response：

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