Image is not rendering from dynamic image path while using express html-pdf package

Question

I'm using the Html-pdf package to generate and download pdf in an express-MongoDB application. Here is the route, where I've used the Html-pdf package.

//@route - GET /generate PDF
router.get("/generateReport/:id", async (req, res) => {

    const tableDataById = await newsModel.findById(req.params.id);
    ejs.renderFile(path.join(__dirname, '../views/pages/', "pdf.ejs"), {output:tableDataById}, (err, data) => {
        
        if (err) {
            res.send(err);
        } else {
            var assesPath = path.join('file://',__dirname,'../public/');
            assesPath = assesPath.replace(new RegExp(/\\/g), '/');

            var options = {
                "height": "11.25in",
                "width": "8.5in",
                "header": {
                    "height": "20mm",
                },
                "footer": {
                    "height": "20mm",
                },
                "base": "file:///" + assesPath
            };
            pdf.create(data, options).toBuffer(function (err, buffer) {
                 if (err) {
                     res.send(err);
                 } else {    
                     res.type('pdf');
                     res.end(buffer,'binary')
                 }
             });
        }
    });
});

I've used ejs template engine. Here is the code of the "pdf.ejs" file which I rendered in the before mentioned route.

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <img class="card-img-top"  src="<%= output.newspapers[0].logo %>"> 
            <h1><%= output.newspapers[0].newsPaperName %></h1>
        </div>
        <div class="text-center">
            <img class="img-fluid" id="test" src="<%= output.image %>" alt="">
        </div>
    </div>
</div>

Here is the screenshot of my application, which failed to render the dynamic image path

Here, I've also included a screenshot of the sample JSON data, in which the path of the images is included

Answer 1

Image src needs absolute path for rendering dynamic image path from the ejs file that you want to generate as a pdf file.

inside your controller, instead of doing this:

ejs.renderFile(path.join(__dirname, '../views/pages/', "pdf.ejs"), {output:tableDataById}

Do this: send a variable that contains the absolute path

ejs.renderFile(path.join(__dirname, '../views/pages/', "pdf.ejs"), {output:tableDataById,dirname: __dirname}

and inside the ejs file instead of doing this :

<img class="img-fluid" id="test" src="<%= output.image %>" alt="">
            

Do this : add the variable dirname and go one step back to get the public path where you are saving your image

<img class="img-fluid" id="test" src="<%= dirname %>/../public/<%= output.image %>" alt="">

Hope this will help solving your problem. Happy coding !!