6

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')
            }
        });
CodaBae
  • 275
  • 2
  • 6
  • 16
  • It sounds like you want a data URI that you can embed in your page. See https://stackoverflow.com/questions/53273552/how-to-convert-binary-image-data-to-uri-for-same-image-in-nodejs for one implementation. – jfriend00 Feb 28 '20 at 14:27

2 Answers2

9

You'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 %>" />
cyberwombat
  • 38,105
  • 35
  • 175
  • 251
  • please i just improved the question – CodaBae Feb 28 '20 at 09:34
  • I think the OP is trying to create a data URL that they embed in their page (where the image data is in the URL), not respond to a browser request for an image. – jfriend00 Feb 28 '20 at 14:24
  • Ah I see. @CodeBae - can you clarify how this image is stored and how it's fetched? I adjusted example to read image as a file but I suspect your use case is a bit different. – cyberwombat Feb 28 '20 at 20:53
0

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>" />
sofian
  • 1
  • 1