Images not showing in pug template

Question

I have put the images folder inside the views folder and added the relative path to the images but the images are not loading on the html page. I have tried multiple options like putting the folder outside views, giving absolute path but nothing worked. Can anyone please take a look and help me figure out what the error is? Screenshot of my directory structure

I have tried many options but nothing worked. Screenshot of webpage

Answer 1

Static files are processed differently from other types of routes in an Express application. A Http path for static files such as abc.com/img/bg.jpg does not map to a file bg.jpg in the views folder. Where it maps to is specified by the express.static function. So, something like:

const express = require("express");
const app = express();
const path = require("path");
app.use(express.static(path.join(__dirname, "public"));

will map the Http path / for static files to the folder public in your application's launch folder.

See __dirname for more information on this parameter.