0

Unable to render images in react, In browser console, image names are displayed correctly but on UI it is not displayed. Also, src attribute is missing from img tag after inspecting element. Please assist. Here is Sample Script

function importAll(r) {
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
}

const get_images = importAll(require.context('../../images', true, /\.(png|jpe?g|svg)$/));

const images = Object.entries(get_images).map(module => module[1].default);

return (
    <div className="product">
        <div>
            <Row>
                {products.map(product =>
                    <Col span={6} key={product.productId}>
                        <div >
                            
                            <div>{console.log(product.productImageName)}
                                {<Image src={images[product.productImageName]} width={200} 
height={200} />}
                            </div>
                            
                        </div>
                    </Col>
                )
                }
            </Row>
        </div>
    </div>
)
Parag Diwan
  • 159
  • 7
sameer chandwaskar
  • 1
  • 1

2 Answers2

1

You don't need to import images. if images are part of your repository then you can use the relative path from the src directory. e.g assuming the images in under src

const path = `images/${[product.productImageName]}`;
<Image src={path} />
Parag Diwan
  • 159
  • 7
0

You should try and check if profile exist. Like this:

{profile && profile.map((...

//Or

{profile?.map((...
Paulliano
  • 347
  • 1
  • 5
  • 15
  • Its working now, got a video where it was suggested to put all images inside public folder so that it can be searched by webpack, thanks anyway. – sameer chandwaskar Feb 27 '22 at 04:02