我需要通过地图方法从我的图像文件中动态导入图像（几个）。首先，我想为我的图像文件设置一个基本 URL，然后从我的包含图像属性的 JSON 文件中读取图像的名称，然后相应地设置图像 src。JSON 文件如下所示：
{
"title": "Blue Stripe Stoneware Plate",
"brand": "Kiriko",
"price": 40,
"description": "Lorem ipsum dolor sit amet...",
"image": "blue-stripe-stoneware-plate.jpg"
},
{
"title": "Hand Painted Blue Flat Dish",
"brand": "Kiriko",
"price": 28,
"description": "Lorem ipsum dolor sit amet...",
"image": "hand-painted-blue-flat-dish.jpg"
},
我的图片文件夹： 
我已经阅读了 redux 的产品，它完美无缺 =>
const products = this.props.products;
console.log(products, 'from redux');
const fetchProducts = [];
for (let key in products) {
fetchProducts.push({
...products[key]
});
}
console.log() => 
现在我想定义一个像这样的基本 URL，稍后通过在 map 方法中添加来自 JSON 文件的图像名称来用作图像 src：
const baseUrl = '../../components/assets/images/';
const fetchProducts = [];
for (let key in products) {
fetchProducts.push({
...products[key]
});
}
const productCategory = fetchProducts.map((product, index) => {
return (
<Photo
key={index}
title={product.title}
brand={product.brand}
description={product.description}
imageSource={baseUrl + product.image}
imageAlt={product.title}
/>
);
});
我的照片组件如下所示：
const photo = props => (
<div className={classes.Column}>
<img src={require( `${ props.imageSource }` )} alt={props.imageAlt} />
<div className={classes.Container}>
<p>{props.brand}</p>
<p>{props.title}</p>
<p>{props.price}</p>
</div>
</div>
);
export default photo;
不幸的是，我遇到了这个错误：
预先感谢并为我的英语不好:)