从文件夹动态导入图像

【问题标题】：Dynamic import images from folders从文件夹动态导入图像
【发布时间】：2020-07-02 03:03:47
【问题描述】：

使用 webpack 我可以从文件夹中导入图片

    let i = 0; 
    const imgs =[];
    let img;    
    for(i=0;i<3;i++){
    img = require( '../Resources/OtherProjects/'+props.type+'/'+i+'.jpg' );
    imgs.push(img);
    }

props.type 给了我一个不同的文件夹来为我的动态组件中的每个文件夹创建一个数组

我的问题是：有更好的方法吗？
另外，有没有办法获取我的文件夹中有多少张图片？

require.context 仅适用于特定文件夹，而不适用于每个文件夹

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

您可以使用alias 为您的src 或根文件夹中的任何目录提供别名。

tsconfig.json 文件示例

const {alias, configPaths} = require('react-app-rewire-alias')

module.exports = function override(config) {
  alias({
    ...configPaths('tsconfig.paths.json')
  })(config)

  return config
}

tsconfig.paths.json

/* tsconfig.paths.json */
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "example/*": ["example/src/*"],
      "@library/*": ["library/src/*"]
    }
  }
}

并将您的 package.json 修改为：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

您也可以参考this了解更多信息。

【讨论】：