How to render my ejs view with response image from node js

Question

I am using gridfs and mongoDB to store images in chunks. And whenever a user requests my server just sends a streamlined image file in response by piping.

Currently my code looks like this :

const download = async (req, res)=>{
try{
const fileName = req.params.name

await mongoClient.connect();

const database = mongoClient.db(dbConfig.database)
const bucket = new GridFsBucket(database, { // required for important methods like openDownloadStream
  bucketName:dbConfig.imgBucket
})

const downloadStream = bucket.openDownloadStreamByName(fileName);

downloadStream.pipe(res) // it only displays an jpg/png image
// res.render("image") , I want to render this ejs page with a image in it and with some static content in it. I want to stream image
 } catch(err){
res.status(501).render("error",{error: err})
}}

My output looks like : my code output

It only renders a jpg file, like how above link is working see it. but rather what i want to do is to get image from response object and render it with my other html elements.

score 1 · Accepted Answer · answered Oct 04 '22 at 23:52

Looks like you're trying to do too much at once.

You need to de-couple the desired streaming image from the initial rendering of your template. Include an image tag in your tempalte with a distinct api from which the image will stream, and the result will look something like your example.

Say your image is called test.png, your server index.js, and your ejs teplate index.ejs. The template (for the sake of your question) can be very simple: index.ejs-->

<h1> stream that image below! </h1>
<image src="/image" hieght="200px" width="200px";/>

Notice the src of this image - this will hit a distinct api on your backend that will stream the image.

The server index.js will look like this -->

var exp = require("express");
var fs = require("fs");
var app = exp();

app.set("view engine", "ejs");

app.get("/image", (req, res) => {
  const streamReadFile = fs.createReadStream("test.png");
  streamReadFile.pipe(res);
});

app.get("/", (req, res) => {
  res.render("index");
});

app.listen(8080, () => {
  console.log("listening on *:8080");
});

Notice here at the home route you render the template as

app.get("/", (req, res) => {
  res.render("index");
});

The src in the image of your template then makes a request back to the server, hitting the /image route which will stream the desired image to your html

app.get("/image", (req, res) => {
  const streamReadFile = fs.createReadStream("test.png");
  streamReadFile.pipe(res);
});

Here's a working demo of the example above, where your image is streamed to an ejs template.

How to render my ejs view with response image from node js

1 Answers1