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

IT技术 json reactjs ecmascript-6 redux react-redux
2021-04-10 00:05:48

我正在尝试在我正在制作的购物车中显示图像,但它没有显示。我必须导入每个图像吗?我知道我的路径很好,因为它以前工作过。我认为我的 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;

数据来自这个product.js

const data = [
    {
        id: 1,
        name: 'Reggae Blaster',
        price: 10,
        currency: 'GOLD',
        image: '../assets/blaster_1.png'
    },
    {
        id: 2,
        name: 'Juicy Blaster',
        price: 10,
        currency: 'GOLD',
        image: 'images/02.jpg'
    },
    {
        id: 4,
        name: 'Full Body Reggae Armor',
        price: 20,
        currency: 'GOLD',
        image: 'images/04.jpg'
    },
    {
        id: 6,
        name: 'Reggae Spikes Left',
        price: 5,
        currency: 'GOLD',
        image: 'images/06.jpg'
    },
    {
        id: 5,
        name: 'Reggae Spikes Right',
        price: 5,
        currency: 'GOLD',
        image: 'images/05.jpg'
    },
    {
        id: 3,
        name: 'Black Full Body Reggae Armor',
        price: 20,
        currency: 'GOLD',
        image: 'images/03.jpg'
    }
];

export default data;

我正在提取所有数据,除了图像不显示

3个回答

假设您使用的是 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>
    );
}

PS还要确保您的图像路径与您导入它们的文件相关。

嗨 Shubham Khatri,这种方法解决了我的问题,但我收到下一个警告,动态添加图像: ./index.html 中的警告module解析失败:意外令牌 (1:0) 您可能需要一个适当的加载程序来处理此文件类型。 | <!DOCTYPE html> | <html lang="zh">
2021-05-30 00:05:48
搜索了近 2 小时后,找到了这个完美的答案。使用反引号是这里的关键 - require( ${image})
2021-06-03 00:05:48
@JuanReinaPascual,我想你现在可能已经解决了这个问题,但只是为了分享,你需要配置你的webpack配置来加载jpeg, svg文件类型
2021-06-04 00:05:48
很棒的东西......这不起作用:img src={require(filePath)}。这确实有效img src={require(`${filePath}`)}
2021-06-11 00:05:48
@Shubham Khatri 如果您使用 webpack 之类的构建工具将图像直接放入公共目录,您将如何处理?我收到一个浏览器错误,说在与服务器相关的目录中找不到相应的图像..?
2021-06-15 00:05:48

img src={require(${filePath} )} - 您还需要添加默认值以获取确切的 URL

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

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

如果您使用像 webpack 这样的构建工具将图像直接放入公共目录,您将如何处理?
2021-06-15 00:05:48