动态导入图像（React Js）（要求 img 路径找不到模块）

Question

我需要通过地图方法从我的图像文件动态导入图像（几个）。首先，我想为我的图像文件设置一个基本 URL，然后从我的包含 image 属性的 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 文件的图像名称来用作图像源：

 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;

不幸的是，我遇到了这个错误： 提前致谢，抱歉我的英语不好 :)

原文由 Vahid 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

导入不是那样工作的。您可以使用这样的基本 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 想要一个绝对路径字符串，前两个执行此技巧。

原文由 devserkan 发布，翻译遵循 CC BY-SA 4.0 许可协议