reactjs - 图像未在反应应用程序中呈现

Question

无法在反应中渲染图像，在浏览器控制台中，图像名称正确显示，但在 UI 上不显示。img此外，检查元素后，标签中缺少 src 属性。请协助。这是示例脚本

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

Answer 1

您不需要导入图像。如果图像是您的存储库的一部分，那么您可以使用目录中的relative路径src。例如假设images在下src

const path = `images/${[product.productImageName]}`;
<Image src={path} />

Answer 2

您应该尝试检查配置文件是否存在。像这样：

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

//Or

{profile?.map((...