如何在 pug 模板中显示图像答案

【问题标题】：How can I display image in pug template如何在 pug 模板中显示图像
【发布时间】：2021-09-14 14:13:20
【问题描述】：

我需要帮助，因为我的客户需要在 3 天内完成这项工作，但我无法在 pug 模板中显示图像。基本上，我在上传中看到的图像已经很好地上传了，即使在img(src"") 中我也可以看到它，因为我右键单击并搜索属性但图像没有出现，即没有从草图框中显示.我尝试减少大小，但没有奏效。请帮忙...

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/1631587019615nysc.jpg
uploads/1631587019615nysc.jpg
uploads/1631587019615nysc.jpg
uploads/1631587019615nysc.jpg

【问题讨论】：

<body> 元素在哪里？
body 不包括在内，你是说我需要 body 来显示图像
肖恩我找到了一种将对象转换为字符串的方法。那是要字符串并将其呈现给哈巴狗的文件，我现在实际上可以看到它，但它是出现的文件属性而不是它本身的图片。我该怎么做才能将这些属性转换为图片。
你得到了什么？在您的浏览器中，转到查看源代码（通常是 Ctrl U），然后将内容粘贴到您的问题中。

标签： javascript node.js pug

【解决方案1】：

你忘了=?，密码是img(src='image.png')

我不是 .pug 开发人员，我只是从这里看到代码：https://nodejsera.com/library/pug/pug-images.html

【讨论】：

哦！谢谢 Aakash1282，我放弃了那部分，因为我很头疼，而且客户正在催促我。我希望在客户交付后将其作为个人挑战。
继续编码?

【解决方案2】：

我和你有同样的问题。我能够解决它的唯一方法是使用公共文件夹中的图像文件而不是资产中的图像文件。它还取决于您如何配置服务器。写的方式就像他们在之前的答案中告诉你的那样，我也给你一个链接：https://dev.to/jh3y/pug-in-5-minutes-272k

希望对你有帮助。 - 热尔瓦

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

【讨论】：