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

284
Vistas
I can't find my images dynamically, inside a JavaScript map in a ReactApp

I am trying to run my acquisitions inside a JavaScript map, all the information is coming in, but when I put the image path on the src inside the tag img, it can't be find. Here is the code:

productSearch(prodBusca) {
    const prodPerPage = 15;
    const pagesVisited = this.state.pageNumber * prodPerPage;
    
    const displayProds = prodBusca.slice(pagesVisited, pagesVisited + prodPerPage).map(prod => {
        let codigo = prod.codigo.toString();
        let path = `${this.imgSrc}/${codigo.substr(0, 1)}/${codigo}.jpg`;
        let img = path;

        return (
            <li key={codigo} className="list-group-item">
                <div>
                    <img src={img} alt={prod.descricao} width="150" height="150" />
                </div>
                <div>
                    <ul>
                        <li>
                            {prod.descricao}
                        </li>
                        <li>
                            {prod.preco}
                        </li>
                    </ul>
                </div>
            </li>
        );
    })

    const pageCount = Math.ceil(prodBusca.length / prodPerPage);

    const changePage = ({ selected }) => {
        this.setState({ pageNumber: selected });
    };

    return (
        <div>
            <section className="secaoProd">
                <ul className="list-group list-group-horizontal">
                    {displayProds}
                </ul>                    
            </section>
            <div>
                <ReactPaginate previousLabel={'<<'} nextLabel={'>>'} pageCount={pageCount} onPageChange={changePage}
                    containerClassName="paginationBttns"
                    previousLinkClassName="previousBttn"
                    nextLinkClassName="nextBttn"
                    disabledClassName="paginationDisabled"
                    activeClassName="paginationActive"
                />
            </div>                
        </div>
    )
}

enter image description here

The application is in ASP.Net and React

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