javascript - 在 React 中将 prop 传递给 时图像未加载

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 的建议，我使用公共(public)路径链接了我的图像。我必须删除绝对路径才能使该解决方案发挥作用。

我将所有图像移至 create-react-app 的公共(public)文件夹内名为“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 方法):

How to do Dynamic images in ReactJS?