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:
//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
// 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:
<!-- 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>
// 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:
<!--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>
Output: Now, go to localhost:3000/dynamic which will render some icons on the webpage. (The urls of these images are passed from server side).
How to Display Images using Handlebars in Node.js ?
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