displaying images in a .handlebars/html

Question

I'm trying to link images to my .handlebars/html files in my views directory. I've created a public folder as I discovered was necessary, but still can't get the linked images to appear when I open my web page.

Here is my node.js code...

var express = require('express');
var session = require('express-session');
var request = require('request');

var app = express();
var handlebars = require('express-handlebars').create({defaultLayout: 'main'});
var bodyParser = require('body-parser');

app.use(session({secret:'secretSauce'}));
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
app.set('port', 3021);

app.get('/', function (req, res, next) {
res.render('index');
});

app.get('/setup', function (req, res, next) {
    res.render('setup')
});

app.use(function(req,res){
  res.status(404);
  res.render('404');
});

app.use(function(err, req, res, next){
  console.error(err.stack);
  res.type('plain/text');
  res.status(500);
  res.render('500');
});

app.listen(app.get('port'), function(){
  console.log('Express started on http://localhost:' + app.get('port') + '; press Ctrl-C to terminate.');
});

And this is a page I've tried to load images on:

<h1>
Getting a Mailjet Account, an API, and Misc. Set Up
</h1><br>
<p>
This first part is going to their website and signing up to get an account. The sign up page looks like this. You can click on the image to take you there.
</p>
<a href="https://app.mailjet.com/signup"><img src="/public/images/mailjet signup.jpg" alt="sign up page"></a>
<br>
<p>
Once you take care of business there, you can head to your account page and click on the link circled in the image below. That link will take you to where your private and public API keys are stored.
</p>
<img src="/public/images/mailjet APIKey.jpg" alt="account page">
<br>
<p>
Awesome, so the last major thing to think about is if you want to add a domain name to your account. Typically your emails that you use at sign up will be autamically set up as a sender, and it will make it look like emails are coming from that account. However, you may have multiple senders on a company domain. In that case you'll want to head over to the accuont settings and add that domain. This way in the future if employees send something it will automatically allow senders from the domain. This is really more of a logistical matter than     anything, and it doesn't directly affect using this How to Guide.
</p>
<ul>
  <li><a href="/">Prev</a> </li>
  <li><a href="">Next</a></li>
</ul>

Answer 1

To get the images on the handlebars page or HTML we need to set the path on the index.js file or app.js file, it depends on you what is your starting page.

Index.js

app.use(express.static('views/images')); 

promotionapplication\views\images - This is my folder structure, my index.js file is in promotionapplication, and i have kept my pics in the images folder. You can keep any of the structure of the folder but you should mention it in accordingly in app.use.

So now i can use any of the pics in the folder, by using the following code in handlebars page-

first.handlebars

 <img src="bckground.jpg" alt="piooop" /> 

Remember to reload the page after the changes made.

It works perfectly fine. If any questions please comment, i will try to give an answer.