【问题标题】:how to get an image from a folder to get to render in ejs如何从文件夹中获取图像以在 ejs 中呈现
【发布时间】:2019-08-20 12:47:05
【问题描述】:

我正在制作一个电子商务网站。目前,我们正在使用 multer 上传图像,其余数据保存在 mongodb 中。所有数据均已正确上传,但是当我尝试从文件夹/公共/图像中获取图像时,什么都没有。任何帮助将不胜感激。

这是我的 multer 代码

app.post('/addProduct', function(req, res){    
upload(req,res,(err)=>{

            if(err){
                res.render('addproduct',{
                    mesg: err
                });
            }
                new product({
                    _id: new mongoose.Types.ObjectId(),
                     image:req.body.image,
                     name: req.body.name,
                     price:  req.body.price,
                     description: req.body.description,
                     category: req.body.category,
                 }).save(function(err)
                 {
                     if(err){
                         console.log(err);
                         res.render('addProduct')
                     }else{
                     res.redirect('/products');
                 }
                 })
            });
        })
        //all function for uploading images and checking file
    //storage engine
    const storage= multer.diskStorage({
        destination: './Public/images/',
        filename: function(req, file, cb){
            cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
        }   
    });
    //upload method
    const upload = multer({
        storage: storage
    }).single('image');
};

这是从 ./public/image 文件夹中获取文件的代码

    <div class= "two row">   
                    <% products.forEach(product => { %>
                        <div class="column">

                                <img src="./Public/images/<%req.files[0].filename%>" class="cover-img">
                                <p><%= product.name %></p>
                                <h3>&dollar;<%= product.price %></h3>
                             <!---  <p><%= product.description %></p>-->
                        </div>
                   <% }); %>

添加Product.ejs 代码

<div class= "two row" onclick="">  
                <% products.forEach(product => { %>
                    <div class="column">
                        <img src="/images/<%req.files[0].filename%>" class="cover-img">
                            <p><%= product.name %></p>
                            <h3>&dollar;<%= product.price %></h3>
                         <a action="/products/productId"></a><button class="btn">Add to cart</button></a>
                         <!---  <p><%= product.description %></p>-->
                    </div>
               <% }); %>

【问题讨论】:

    标签: node.js ejs multer


    【解决方案1】:

    我认为您不需要在资产路径前添加Public。所以你的&lt;img&gt; src 可以是:

    <img src="/images/<%req.files[0].filename%>" class="cover-img">
    

    但是,为 Express 应用程序设置静态资产很重要。 Follow the docs here 看看是怎么做到的。

    你真正需要做的就是拥有:

    app.use(express.static('Public'))
    

    在 Express 应用顶部的某个位置。

    【讨论】:

    • 嘿,我在 app.js 中已经有了。我只是找不到解决问题的方法。问题仍未解决
    猜你喜欢
    • 2021-10-05
    • 1970-01-01
    • 2023-03-06
    • 1970-01-01
    • 2012-01-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-25
    相关资源
    最近更新 更多