React批量导入图标/图片

Question

我有成百上千个图标和图片需要导入。有没有办法减少在页面顶部编写如此多的导入语句？我想在一个单独的文件中编写导入语句，并将其嵌入到页面顶部。

import basicAmenitiesIcon from '../../../../images/icons/wifi-sign.png';
import parkingIcon from '../../../../images/icons/parking.png';
...

有其他解决方法吗？我正在使用webpack，这是我的配置文件:

{
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
        'file?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
}

- Deepak Bandi

---

为什么不使用字体图标呢？这样会更快，而且不需要为每个图标都写入导入语句。 - Khalid Azam

Answer 1

是的，这是可能的，可以看看我在这里的答案：https://dev59.com/I10a5IYBdhLWcg3w07vt#41410938

var context = require.context('../../../../images/icons', true, /\.(png)$/);
var files={};

context.keys().forEach((filename)=>{
  files[filename] = context(filename);
});
console.log(files); //you have file contents in the 'files' object, with filenames as keys

- Tudor Ilisoi

---

我可以补充一下，我给你参考的那个问题上有一个类似的被接受的答案。 - Tudor Ilisoi

一直在等待这个。谢谢。 - Deepak Bandi