我正试图在我正在制作的购物车中显示图像，但它没有显示出来。我必须导入每个图像吗？我知道我的路径很好，因为它之前有用。我认为我的product.js文件可能有问题，但我无法理解。这是我的Product.jsimport 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;数据来自此产品.jsconst 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'},{我正在提取所有数据，除了图像没有显示
3 回答
开心每一天1111
TA贡献1836条经验 获得超12个赞
假设您使用的是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还要确保图像路径相对于要导入它们的文件。
蓝山帝景
TA贡献1843条经验 获得超7个赞
嗨Shubham Khatri，这种方法解决了我的问题但我得到了动态添加图像的下一个警告：警告在./index.html模块解析失败：意外的令牌（1：0）您可能需要一个合适的加载器来处理这种文件类型。| <！DOCTYPE html> | <html lang =“en”>
添加回答
举报
0/150
提交
取消