Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

152
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda