首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在pug模板中显示图像

如何在pug模板中显示图像
EN

Stack Overflow用户
提问于 2021-09-14 14:13:21
回答 1查看 692关注 0票数 0

请我需要帮助我的客户需求这项工作在3天内,我被困在pug模板中显示图像。基本上,图像已经被上传了,就像我在uploads中看到的一样,甚至在img(src"")中,当我右键单击并搜索属性时,也可以看到它,但是图像没有出来,也就是说,没有从草图框中显示出来。我试着减少尺寸,但不起作用。请帮帮我。

index.js

代码语言:javascript
运行
复制
    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

代码语言:javascript
运行
复制
 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

上传

代码语言:javascript
运行
复制
uploads/1631587019615nysc.jpg
uploads/1631587019615nysc.jpg
uploads/1631587019615nysc.jpg
uploads/1631587019615nysc.jpg
EN

Stack Overflow用户

发布于 2021-09-21 06:49:33

你忘了=?,代码是img(src='image.png')

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

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69179418

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档