我需要通过map方法动态地从我的图像文件中导入图像(几个)。首先,我想为我的图像文件设置一个基本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]
});
}
现在我想定义一个像这样的基本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}
/>
);
});
我的Photo组件如下所示:
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;
导入不是这样的。您可以使用这样的基本URL:
const baseUrl = "../../components/assets/images/";
然后你可以传递给你的Photo
组件:
<Photo
key={index} // Don't use index as a key! Find some unique value.
title={product.title}
brand={product.brand}
description={product.description}
imageSource={baseUrl + product.image}
imageAlt={pro.title}
/>;
最后,在你的Photo
组件中使用require
:
<img src={require( `${ props.imageSource }` )} alt={props.imageAlt} />
或者像那样:
<img src={require( "" + props.src )} alt={props.imageAlt} />
但是,不要跳过""
部分或不直接使用它像:
<img width="100" alt="foo" src={require( props.src )} />
因为require
想要一个绝对路径字符串,前两个做这个技巧。