将道具传递给 <img src="this.prop" 时，图像未加载。React 中的 />

Question

当我将 prop 传递给 img 的属性 src 时，我遇到了链接未加载图像的问题。我尝试过将 require() 包裹在我的链接周围，但它不起作用。

我有一个巨大的产品库，使用图像加载器手动导入图像是不可行的。

因此，有没有办法使用 src 属性内的 props 来加载图像？

我正在使用 NODE_PATH=src/

谢谢您的帮助！

export const productLib = [{
    ID: "001",
    name:"product name",
    src: "lib/productLib/img/product_name",
    color: "",
    ...
    }, {...}]

import React from 'react';

export class Products extends React.Component {
    render() {
        return(
            <div className="products">
                <img src={this.props.product.src} width="50" />
                <h6>{this.props.product.name}<span className={`block ${this.props.product.color}`}></span></h6>
            </div>
        )
    }
}

Answer 1

根据 Xuscrus 的建议，我使用公共路径链接了我的图像。我必须删除绝对路径才能使该解决方案发挥作用。

我将所有图像移至 create-react-app 的公共文件夹内名为“img”的文件夹中。

根据我最初声明中使用的示例，这是我找到的最简单的解决方案：

import React from 'react';

export class Products extends React.Component {
    render() {
        return(
            <div className="products">
                <img src={`/img/${this.props.product.src}.png`} width="50" />
                <h6>{this.props.product.name}<span className={`block ${this.props.product.color}`}></span></h6>
            </div>
        )
    }
}

我的解决方案的主要参考是这篇文章（正确答案中的 URL 方法）：

如何在ReactJS中制作动态图像？