Reactjs 如何引用react中本地文件夹中的照片？

我的文件夹结构如下所示：

Src
 Assets
   Images
 Components
   Information
     Lines

我将使用图像文件夹中的所有照片 我尝试了以下方法，但没有得到答案：

let array = [];
for (let i=1 ; i < 21 ; i++) {
    array.push(
        <img src={require(`../../Assets/Images/Line${i}.JPG`)} alt=""/>
    )
}

---

为了处理这种情况，我们可以使用一些第三方组件。 第一个库是，它允许我们使用基于根的路径导入组件

安装

npm install babel-plugin-root-import --save-dev

自定义根目录

const rootImportOpts = {
  root: __dirname,
  rootPathPrefix: '~/',
  rootPathSuffix: 'src/js',
};
module.exports = {
  plugins: [['babel-plugin-root-import', rootImportOpts]],
};


babel.config.js


const rootImportOpts = {
      root: __dirname,
      rootPathPrefix: '~/',
      rootPathSuffix: 'src/Assets',
    };
    
        module.exports = (api) => {
          api.cache(true);
        
          const plugins = [['babel-plugin-root-import', rootImportOpts]];
        
          return { plugins };
        };

现在您可以这样使用：

<img src={require(`~/your-image-name`)} alt=""/>

有关更多信息，请访问github

我们需要安装的第二个是。该组件允许我们在不使用“弹出”和不创建react脚本分支的情况下更改网页包配置

---

假设您使用的是

webpack

，您可以借助此[