How to Display Images using Handlebars in Node.js ?

Last Updated : 08 Jan, 2025

In this article, we will discuss how to display images using handlebars in Node.js. You may refer to this article for setting up handlebars View Engine in Node.js

Approach

To display images using Handlebars in Node.js, pass the image URLs to the template from your server. In the Handlebars template, use the img tag with the passed URL to render the images dynamically.

Displaying images using Handlebars in Node.js allows you to build dynamic web pages.

Steps to Display Images using Handlebars

Step 1: Initialize Node project

npm init

Step 2: Install express and express-handlebars

npm install --save express express-handlebars

The Updated Dependencies in the package.json file

"dependencies": {
    "express": "^4.19.2",
    "express-handlebars": "^7.1.2",
}

Step 3: Setting up express server:

JavaScript

//importing modules
import express from "express"
import path from "path"
import exphbs from "express-handlebars"

// Express server's instance
const app = express();

const PORT = process.env.PORT || 3000;

// listening
app.listen(PORT, () => console.log(`Server started running on PORT ${PORT}`));

Project Structure:

Step 3: Change the default view engine to handlebars: To serve static files like images from a directory named "images"

app.engine("handlebars", exphbs({ defaultLayout: "main" }));
app.set("view engine", "handlebars");
app.use(express.static("images"));

With the above line we are telling our Node.js app where our images will be stored. We will not have to specify a messy path to our image in our <img> tag.

Step 4: Define routes and render views accordingly

Node

// Route to display static src images
app.get("/static", (req, res) => {
    res.render("static");
});

// Route to display dynamic src images
app.get("/dynamic", (req, res) => {
    imageList = [];
    imageList.push({ src: "icons/flask.png", name: "flask" });
    imageList.push({ src: "icons/javascript.png", name: "javascript" });
    imageList.push({ src: "icons/react.png", name: "react" });
    res.render("dynamic", { imageList: imageList });
});

Handlebar templates: Now let us create a static.handlebars file in our views directory with the following content:

HTML

<!-- Filename - index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Handlebars Images Demo</title>
  </head>
  <body>
      <h1>Display Static Images Using Handlebars In NodeJS</h1>
  <br>
      <img src="images/gfg.png" alt="" style="border: 5px inset black;">
  </body>
<html>

Node

// Filename - index.js

//importing modules
import express from "express"
import path from "path"
import exphbs from "express-handlebars"

// Express server's instance
const app = express();

const PORT = process.env.PORT || 3000;

app.engine("handlebars", exphbs({ defaultLayout: "main" }));
app.set("view engine", "handlebars");

app.use(express.static("images"));

// Route to display static src images
app.get("/static", (req, res) => {
    res.render("static");
});

// Route to display dynamic src images
app.get("/dynamic", (req, res) => {
    imageList = [];
    imageList.push({ src: "icons/flask.png", name: "flask" });
    imageList.push({ src: "icons/javascript.png", name: "javascript" });
    imageList.push({ src: "icons/react.png", name: "react" });
    res.render("dynamic", { imageList: imageList });
})

// Listening
app.listen(PORT, () => console.log(`Server started running on PORT ${PORT}`));

node index.js

Output: Now, go to localhost:3000/static which will render GFG logo on the webpage.

Now let us create a dynamic.handlebars file in our views directory with the following content:

HTML

<!--index.html --><!DOCTYPE html>
<html lang="en">
  <head>  
     <title>Handlebars Images Demo</title>
  </head>
  <body>
  <h1>Display Dynamic Images Using Handlebars In NodeJS</h1> <br>
  <div class="row">
  {{#each imageList}}
  <div class="col-md-4">
      <div class="text-success" style="font-size: large;
            font-weight: 700;">{{this.name}}</div>
         <img src="{{this.src}}">
      </div>
      {{/each}}
  </div>
  </body>
<html>