How can I display image in pug template

Question

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", id="file", name="avatar")
        br
        input(type="submit", value="upload")
        br

uploads

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

Answer 1

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: https://dev.to/jh3y/pug-in-5-minutes-272k

I hope it helps you. - Gerva

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

Answer 2

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

I'm not .pug developer, I just seen codes from here : https://nodejsera.com/library/pug/pug-images.html