Json 在ReactJs中基于动态路径加载图像

我试图在我正在制作的购物车中显示图像，但它没有显示出来。我必须导入每个图像吗？我知道我的路径很好，因为它以前工作过。我想我的product.js文件中可能有错误，但我无法找出它

这是我的Product.js

import React, { Component, PropTypes } from 'react';

class Product extends Component {
    handleClick = () => {
        const { id, addToCart, removeFromCart, isInCart } = this.props;

        if (isInCart) {
            removeFromCart(id);
        } else {
            addToCart(id);
        }
    }

    render() {
        const { name, price, currency, image, url, isInCart } = this.props;

        return (
            <div className="product thumbnail">
                <img src={image} alt="product" />
                <div className="caption">
                    <h3>
                        <a href={url}>{name}</a>
                    </h3>
                    <div className="product__price">{price} {currency}</div>
                    <div className="product__button-wrap">
                        <button
                            className={isInCart ? 'btn btn-danger' : 'btn btn-primary'}
                            onClick={this.handleClick}>
                            {isInCart ? 'Remove' : 'Add to cart'}
                        </button>
                    </div>
                </div>
            </div>
        );
    }
}

Product.propTypes = {
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    price: PropTypes.number,
    currency: PropTypes.string,
    image: PropTypes.string,
    url: PropTypes.string,
    isInCart: PropTypes.bool.isRequired,
    addToCart: PropTypes.func.isRequired,
    removeFromCart: PropTypes.func.isRequired,
}

export default Product;

---

我正在提取除图像外的所有数据，但图像不会显示

假设您使用的是webpack，则需要导入图像才能像这样显示

<img src={require('images/06.jpg')} alt="product" />

现在图像数据是动态的， 直接指定导入路径，如

<img src={require(image)} alt="product" />

不起作用

但是，您可以通过使用模板文本导入图像，如

<img src={require(`${image}`)} alt="product" />

所以你的代码看起来像

render() {
    const { name, price, currency, image, url, isInCart } = this.props;

    return (
        <div className="product thumbnail">
            <img src={require(`${image}`)} alt="product" />
            <div className="caption">
                <h3>
                    <a href={url}>{name}</a>
                </h3>
                <div className="product__price">{price} {currency}</div>
                <div className="product__button-wrap">
                    <button
                        className={isInCart ? 'btn btn-danger' : 'btn btn-primary'}
                        onClick={this.handleClick}>
                        {isInCart ? 'Remove' : 'Add to cart'}
                    </button>
                </div>
            </div>
        </div>
    );
}

render（）{
const{name，price，currency，image，url，isInCart}=this.props；
返回(
{价格}{货币}
{isInCart？'Remove'：'Add to cart'}
);
}

---

另外，还要确保图像路径与导入它们的文件相关。

您必须将这些图像放在捆绑应用程序所在的文件夹中。

img src={require（

${filePath}

）}

--工作 您还需要添加默认值以获得准确的URL

img src={require(`${filePath}.default`)}

---

您好，Shubham Khatri，这种方法解决了我的问题，但我在动态添加图像时收到下一个警告：./index.html模块解析失败中的警告：意外标记（1:0）您可能需要适当的加载程序来处理此文件类型。|@JuanReinaPascual，我想你现在可能已经解决了这个问题，但只是为了分享，你需要配置你的

webpack

config来加载

jpeg，svg

文件类型伟大的东西。。。这不起作用：

imgsrc={require（filePath）}

。这确实有效

imgsrc={require（`${filePath}'）}

在搜索了将近2小时后，找到了这个完美的答案。使用backtick是这里的关键-require（

${image}

）@Shubham Khatri如果您使用像webpack这样的构建工具，将图像直接放在公共目录中，您如何处理这个问题？我收到一个浏览器错误，说在与服务器相关的目录中找不到相应的映像..？如果您使用像webpack这样的生成工具，在其中映像直接放在公共目录中，您如何处理此问题？

img src={require(`${filePath}.default`)}