Image not rendered in react-CodePudding

Unable to render image in react, In console Image names are displayed correctly but on UI it is not displayed also src attribute is missing from image tag as checked by inspecting element. Please assist. Below is my codehere is SS

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>
)

CodePudding user response：

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} />

CodePudding user response：

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

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

//Or

{profile?.map((...