我正在尝试在正在制作的购物车中显示图像,但没有显示出来。我必须导入每个图像吗?我知道我的路径很好,因为它以前可以工作。我认为我的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;
我正在提取所有数据,但图像没有显示
假设您使用的是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还请确保您的图像路径是相对于您要导入它们的文件的。