Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

157
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda