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

288
Visualizações
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 à 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