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