猿问
下载APP

在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;

数据来自此产品.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'

},

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


天涯尽头无女友
浏览 139回答 3
3回答

45度呼吸

假设您使用的是webpack,则需要导入图像才能显示它<img src={require('images/06.jpg')} alt="product" />现在你的图像数据是动态的,直接指定导入路径就像<img src={require(image)} alt="product" />不起作用。但是,您可以通过使用模板文字来导入图像<img src={require(`${image}`)} alt="product" />所以你的代码看起来像render() {&nbsp; &nbsp; const { name, price, currency, image, url, isInCart } = this.props;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div className="product thumbnail">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src={require(`${image}`)} alt="product" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="caption">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href={url}>{name}</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="product__price">{price} {currency}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="product__button-wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={isInCart ? 'btn btn-danger' : 'btn btn-primary'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={this.handleClick}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {isInCart ? 'Remove' : 'Add to cart'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );}PS还要确保图像路径相对于要导入它们的文件。

幕布斯5086720

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

蓝山帝景

嗨Shubham Khatri,这种方法解决了我的问题但我得到了动态添加图像的下一个警告:警告在./index.html模块解析失败:意外的令牌(1:0)您可能需要一个合适的加载器来处理这种文件类型。| <!DOCTYPE html> | <html lang =“en”>
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答