Javascript Can'；t在React中的require（）中使用变量

我通过变量数组使用图像源。我尝试了变量，也尝试了反勾号，但它给了我一个错误：找不到模块“../../images/sectors/pellet mill.png”。如果我只使用源url，它可以正常工作。为什么我们不能在require（）中使用变量

```

Webpack只能捆绑在捆绑时可以识别的资源。那么，Webpack如何确切地知道

需要什么文件（数据[0].image）

表示什么呢？它不能，因为只有在运行时才知道文件路径，而不是包/编译时

另一种方法是在专用JS文件中提前导入所有静态映像路径，然后将其用作绑定映像的“映射”。大概是这样的：

// images.js
import image01 from './my/path/to/image01.jpg';
import image02 from './my/path/to/image02.jpg';

const images = {
  image01,
  image02
};

export default images;

//某个组件文件
从“/images.js”导入图像；
函数MyComponent（）{
返回；
}

---

与提前导入静态资产以便将其捆绑，然后在运行时利用该结构访问捆绑资产的概念相比，

图像或数据的确切结构不那么重要。
默认情况下
要求
仅处理js和json。除非您有用于png文件的特殊网页包加载器，否则该加载器将无法工作。请尝试“第二个选项是导入，但在这种情况下无法使用”。我们还可以使用什么？尝试过了，它已经不起作用了。事实上，我使用的是一个json文件，其中我的所有数据都可以打印在卡组件上，因此我不需要重复该组件。还有其他的东西，不仅仅是图像，那么在js文件中有没有办法处理这个问题？@Sohaib我不知道你的意思。你能在原始问题中发布更多关于JSON文件和项目结构的信息吗？我想出了一个解决方案。非常感谢帮助过我的兄弟。
// images.js
import image01 from './my/path/to/image01.jpg';
import image02 from './my/path/to/image02.jpg';

const images = {
  image01,
  image02
};

export default images;

// Some component file
import images from './images.js';

function MyComponent() {
  return <img src={images.image01} />;
}