javascript - 在我的数据库图像之前显示空白引导卡

Question

我有一个使用 nodejs、express 和 mongodb 的在线商店网页，所以我已将图像 url、标题、描述...你们下面的代码：
看看下面的图片

index.js

    var express = require('express');
var router = express.Router();
var Product = require('../models/product')
/* GET home page. */
router.get('/', function(req, res, next) {
   Product.find(function(err, docs) {
    var productChunks = [];
    var chunkSize = 3;
    for (var i = 0; i < docs.length; i += chunkSize){
      productChunks.push(docs.slice(i, i + chunkSize));
    }
    res.render('shop/index', { title: 'Shopping Cart', products: productChunks });
  });
});

module.exports = router;

索引.hbs

{{# each products}}
<div class="d-flex justify-content-between mt-3">
   {{# each this}}
   <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="{{this.imagePath}}" alt="image">
      <div class="card-body">
         <h5 class="card-title">{{this.title}}</h5>
         <p class="card-text">{{this.description}}</p>
         <div class="d-flex justify-content-between align-items-center">
            <div class="price">{{this.price}} $</div>
            <a href="#" class="btn btn-primary"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Buy</a>
         </div>
      </div>
   </div>
   {{/each}}
</div>
{{/each}}

以下错误： 点击查看图片

Answer 1

仔细检查您上传图片和加载图片的来源，您可以在浏览器 > 网络中使用开发人员工具并检查图片是否加载或是否包含有关 url、状态、有效负载等信息。