How to display an image or multiple images from an array of object to react frontend cart section. this is my code but images not showing inside the react frontend part, showing only the image icon. please please.. put your suggestion or explain me about my mistakes on this code.
image of cart section of my project
productModel.js
const mongoose = require('mongoose');
const productSchema = mongoose.Schema({
name:{
type:String,
required:[true,"Please enter product name"]
},
description:{
type:String,
required:[true,"Please enter product description"]
},
price:{
type:Number,
required:[true,"Please enter the product price"]
},
images:[
{
sample_id:{
type:String,
required:true
},
url:{
type:String,
required:true
}
}
],
category:{
type:String,
required:[true,"Please enter the product category"]
},
stock:{
type:Number,
required:[true,"Please enetr the stock"],
default:1,
// maxLength:[4,"stock cannot exceed 4 charecters"]
},
user:{
type:mongoose.Schema.ObjectId,
ref:"User",
required:true,
},
createdAt:{
type:Date,
default:Date.now
}
})
module.exports = mongoose.model("mom",productSchema);
CartItemCard.js
import React from 'react'
import { Link } from 'react-router-dom';
import './CartItemCard.css';
const CartItemCard = ({item,deleteCartItems}) => {
return (
<div className='CartItemCard'>
<img src={item.images} alt="ssa" />
<div className='productcartinfo'>
<b className={item.Stock <1 ? "redColor" : "greenColor"}>
{item.Stock < 1 ? " OutOfStock" : " InStock"}
</b>
<Link to={`/product/${item.product}`}className="linkno" >{item.name}</Link>
<span><i class="fa-solid fa-indian-rupee-sign"></i> {` ${item.price}`}</span>
<p onClick={() => deleteCartItems(item.product)}>remove <i class="fa-solid fa-trash"></i></p>
</div>
</div>
)
}
export default CartItemCard
your images are an array so you can't add that as an image source, using React you need to loop and create an img element for each image
change this
<img src={item.images} alt="ssa" />
to something like this:
{item.images.map(image => <img src={image.url} alt="ssa" />)}