how do i convert this buffer data to an image so when am looping thru the result and rendering it in the img src it will render as an image that the user can see
am using ejs to render it
<span>
<img class="user-with-avatar" src=<%=item.photo%> />
</span>
when i console.log(result.data.photo), i get this
{"type":"Buffer","data":[100,97,116,97,58,14,79,8,113,97,65,43,57,55,89,69,88,51,66,101,70,86,112,121,112,121,121,121,80,81,104]},
{"type":"Buffer","data":[100,97,116,97,58,14,79,8,113,97,65,43,57,55,89,69,88,51,66,101,70,86,112,121,112,121,121,121,80,81,104]},
{"type":"Buffer","data":[100,97,116,97,58,14,79,8,113,97,65,43,57,55,89,69,88,51,66,101,70,86,112,121,112,121,121,121,80,81,104]}
how do i fix it with this code arrangement
app.get('/products', function (req, res) {
if (req.session.token && req.session.user_id) {
let data = {
token: req.session.token,
id: req.session.user_id,
}
let url = `https:/url/product/get_products?id=${data.id}&token=${data.token}`
functions.callAPIGet(
url,
function (error, result) {
res.render('products', {
result: result.data
})
}
);
} else {
res.redirect('/login')
}
});
how do i convert this buffer data to an image so when am looping thru the result and rendering it in the img src it will render as an image that the user can see
am using ejs to render it
<span>
<img class="user-with-avatar" src=<%=item.photo%> />
</span>
when i console.log(result.data.photo), i get this
{"type":"Buffer","data":[100,97,116,97,58,14,79,8,113,97,65,43,57,55,89,69,88,51,66,101,70,86,112,121,112,121,121,121,80,81,104]},
{"type":"Buffer","data":[100,97,116,97,58,14,79,8,113,97,65,43,57,55,89,69,88,51,66,101,70,86,112,121,112,121,121,121,80,81,104]},
{"type":"Buffer","data":[100,97,116,97,58,14,79,8,113,97,65,43,57,55,89,69,88,51,66,101,70,86,112,121,112,121,121,121,80,81,104]}
how do i fix it with this code arrangement
app.get('/products', function (req, res) {
if (req.session.token && req.session.user_id) {
let data = {
token: req.session.token,
id: req.session.user_id,
}
let url = `https:/url/product/get_products?id=${data.id}&token=${data.token}`
functions.callAPIGet(
url,
function (error, result) {
res.render('products', {
result: result.data
})
}
);
} else {
res.redirect('/login')
}
});
- It sounds like you want a data URI that you can embed in your page. See stackoverflow./questions/53273552/… for one implementation. – jfriend00 Commented Feb 28, 2020 at 14:27
2 Answers
Reset to default 9You'll need to convert the buffer to a base64 string. Here's an example for a PNG image. I am not clear on where your image is stored and format it's in however. This example reads the image as a file. May need to adjust things based on your data source.
server.js
const express = require('express')
const app = express()
const fs = require('fs')
app.set('view engine', 'ejs')
app.get('/', function(req, res) {
const data = fs.readFileSync('./image.png')
res.render('page', {
image: data.toString('base64')
})
})
const server = app.listen(2000)
views/page.ejs
<img src="data:image/png;base64,<%= image %>" />
this is an examples of how you can do it using the express.js
const express = require("express");
const app = express();
app.get("/images/:id", async (req, res) => {
const id = req.params.id;
const image = await Product.findOne({ _id: id }).select("images");
res.contentType(image.contentType);
res.send(image.data);
});
app.listen(3000, () => {
console.log("Image server started on port 3000");
});
And here's how you can display the images in HTML:
<img src="http://localhost:3000/images/<id-of-the-image>" />