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

假设您使用的是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还请确保您的图像路径是相对于您要导入它们的文件的。