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: My "home.hbs" code: The "GET" error specifically states Cannot GET /public/img/logo.png That's all the info I have, any help would be much appreciated. Answer Specify the path prefix for the

Specify the path prefix for the static file handler. Change:app.use(express.static('public'));toapp.use('/public', express.static('public'));and additionally verify that you indeed have a file named public/img/logo.png.

Error: Cannot GET using Express & handlebars

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');

JavaScript
​x
 
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>

JavaScript
 
<!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.

Answer

Specify the path prefix for the static file handler. Change:

app.use(express.static('public'));

JavaScript
 
app.use(express.static('public'));
​

app.use('/public', express.static('public'));

JavaScript
 
app.use('/public', express.static('public'));
​

and additionally verify that you indeed have a file named public/img/logo.png.

Advertisement

Answer