0

I've got an online store webpage using nodejs, express and mongodb so i have uploaded the image url's, title, description... into my database but the problem is that on webpage it is showing 2 black cards before each image i will show you guys the code below:
Check out the image below

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;

index.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}}

error below: Click for image

Omar Dakelbab
  • 1
  • 1
    Used your exact code and it seems to work fine: https://codesandbox.io/s/stupefied-fire-kxzc9?file=/routes/home.js –  Jan 17 '22 at 09:02

1 Answers1

0

Double check source where you upload images and load images, you can use developer tools in browser > network and check does the images load or not there's contain information about url, status, payload and others.

justmealf
  • 35
  • 1
  • 4