How can I display image in pug template

Please I need help for my client demand this work in 3 days and I am stuck with displaying image in pug template. Basically, the image have been uploaded fine as I see it in uploads, and even in the img(src"") I can see it as I right click and search the property but the image is not coming out, i.e is not displaying from the sketch box. I try reducing the sise but did not work. please help...

index.js

 var express = require('express'); var app = express() var path = require("path"); //multer object creation var multer = require('multer') var fs = require("fs"); app.use(express.static(__dirname)); var storage = multer.diskStorage({ destination: function (req, file, cb) { fs.mkdir('./uploads/',(err)=>{ cb(null, './uploads/'); }); //cb(null, path.join(__dirname + '../public/uploads')); }, filename: function (req, file, cb) { cb(null, Date.now() + file.originalname); } }) var upload = multer({ storage: storage }) module.exports = function(app){ //GET home page. app.route("/").get(function(req, res, next) { res.render( path.join(__dirname + "/../views/index.pug")); }); app.route("/profile").post(upload.single('avatar'),function(req, res) { var image = req.file; console.log(image); res.render(path.join(__dirname + "/../views/index.pug"), {image: image}) }); } 

index.pug

 html head title nanas personal portfolio script. document.addEventListener("DOMContentLoaded", funtion(event){ document.querySelector("img") img.style.height = "50px"; img.style.width = "50px"; display = "block" }) meta(name='description', content='Profile') meta(charset='utf-8') meta(http-equiv='X-UA-Compatible', content='IE=edge') meta(name='viewport', content='width=device-width, initial-scale=1') link(rel='stylesheet', href='/public/style.css') header img(src='./uploads/' + image) div.profile-picture label choose/upload profile pic br form(action="/profile", accept="image/x-png,image/gif,image/jpeg,image/jpg", method="post", enctype="multipart/form-data") input(type="file",, name="avatar") br input(type="submit", value="upload") br 

uploads

uploads/1631587019615nysc.jpg uploads/1631587019615nysc.jpg uploads/1631587019615nysc.jpg uploads/1631587019615nysc.jpg 

2 Answers

you forgot = 😂, the code is img(src='image.png')

I'm not .pug developer, I just seen codes from here :

I had the same problem as you. The only way I was able to solve it is by using the image file in the public folder and not in assets. It also depends on how you have the server configured. The way to write is as they told you in previous answers, I also leave you a link:

I hope it helps you. - Gerva

app.use(express.static(path.join(__dirname, 'public'))); app.set('views', './src/public');