在ReactJs中基于动态路径加载图像 [英] Load images based on dynamic path in ReactJs

问题描述

我正在尝试在正在制作的购物车中显示图像，但没有显示出来.我必须导入每个图像吗?我知道我的路径是正确的，因为它以前可以工作.我认为我的product.js文件中可能有问题，但是我无法弄清楚.

I'm trying to display images in a shopping cart i'm making but its not showing up. Do i have to import each image? I know my paths are fine because it worked before.I think there might be something wrong in my product.js file but I can't figure it out.

这是我的Product.js

Here is my 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

The data comes from this 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;

我正在拉取所有数据，只是图像没有显示

I am pulling all the data except the images just don't show up

推荐答案

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

Assuming that you are using webpack, you need to import the image in order to display it like

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

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

Now that your image data is dynamic, directly specifying the import path like

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

不起作用.

不过，您可以通过使用模板文字(如

However you can import the image by making use of template literals like

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

P.S.另外，请确保您的图像路径是相对于您要导入它们的文件的.

P.S. Also make sure that your image path is relative to the file you are importing them in.

这篇关于在ReactJs中基于动态路径加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！