I’m new to JS/Handlebars and I’m unable to display an image from my home.hbs file in VS Code. When I run the server, I get this:
Here’s my server code:
const express = require('express');
const app = express();
const port = 3000;
app.set('views', 'views');
app.set('view engine', 'hbs');
app.use(express.static('public'));
app.get('/', function(req, res) {
res.render('home', {});
});
app.listen(port);
console.log('server listening on port 3000');
My “home.hbs” code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Handlebars at Work</title>
</head>
<body>
<img src="/public/img/logo.png">
<h1>Hello There, {{name}}</h1>
</body>
</html>
The “GET” error specifically states
Cannot GET /public/img/logo.png
That’s all the info I have, any help would be much appreciated.
Advertisement
Answer
Specify the path prefix for the static file handler. Change:
app.use(express.static('public'));
to
app.use('/public', express.static('public'));
and additionally verify that you indeed have a file named public/img/logo.png.