• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

199
Views
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

almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error