Question

使用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仅适用于特定文件夹，不适用于每个文件夹

Answer 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以获得更多信息。

从文件夹动态导入图像

1 个答案: