动态导入图像（React Js）（需要img路径找不到模块） [英] importing image dynamically (React Js) (Require img path cannot find module)

问题描述

我需要通过映射方法从我的图像文件动态导入图像（几个）。首先，我想为图片文件设置基本URL，然后从包含image属性的JSON文件中读取图片名称，然后相应地设置图片src。
JSON文件如下：

I need to import images(several) from my image file dynamically by a map method. First, I want to set a base URL to my images file and then read the image's name from my JSON file which includes the image property and then set the image src accordingly. The JSON file is like below :

{
      "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的产品，效果很好=>

I have read the products by redux which is works perfectly =>

const products = this.props.products;
console.log(products, 'from redux'); 
const fetchProducts = [];
    for (let key in products) {
      fetchProducts.push({
        ...products[key]
      });
    }

console.log（）=>

the console.log() =>

现在，我想定义一个这样的基本URL，稍后通过在map方法中从JSON文件中添加图像名称来将其用作图像src：

Now I want to define a base URL like this which later use as image src by adding the image's name from the JSON file in the map method :

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}
    />
  );
});

我的照片组件如下所示：

my Photo component looks like below :

  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;

不幸的是，我遇到了这个错误：
预先感谢，并感谢我的英语不好:)

unfortunately, I have faced this error: Thanks in advance and sorry for my bad English :)

推荐答案

导入无法正常工作。您可以使用这样的基本URL：

Import is not working like that. You can use a base URL like that:

const baseUrl = "../../components/assets/images/";

然后您可以将其传递给照片组件像这样：

Then you can pass to your Photo component like that:

<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}
/>;

最后，在您的照片组件中使用要求：

Lastly, in your Photo component use require:

<img src={require( `${ props.imageSource }` )} alt={props.imageAlt} />

或类似的方式：

<img src={require( "" + props.src )} alt={props.imageAlt} />

但是，请不要跳过 部分或不要直接使用它，例如：

But, don't skip "" part or don't use it directly like:

<img width="100" alt="foo" src={require( props.src )} />

因为 require 需要绝对路径字符串，并且前两个做到这一点。

since require wants an absolute path string and first two do this trick.

这篇关于动态导入图像（React Js）（需要img路径找不到模块）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！