如何在 reactjs 中从 props 动态加载图像?

Question

这是我的代码，其中所有数据都是动态加载的，但是没有加载图像：

function ProductScreen(props) {
const product = data.products.find((x) => x._id == props.match.params.id);
return (
<div>
<div className="details">
<div className="details-image">
<img src={product.image} alt="product" />       /* Is something is wrong here is this line */
</div>
<div className="details-info">
<ul>
<li>
<h4>{product.name}</h4>
</li>
</ul>
</div>
</div>
</div>
);
}

这是数据作为道具进入的代码

export default {
products: [
{
_id: 1,
name: "Slim Shirt",
category: "Shirts",
image: "images/d1.jpg",
price: 60,
brand: "Nike",
rating: 3.5,
numReviews: 21,
}
],
};

Answer 1

假设您将image文件夹放在public文件夹中，则在image属性中添加/。