Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

151
Views
How to display an image or multiple images from an array of object to react frontend cart section?

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
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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" />)}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!