React导入图标/图像
问题描述:
我有100个要导入的图标和图像。有没有办法消除在页面顶部写入如此多的导入语句?我正在考虑在一个单独的文件中写入一个导入语句,并将其嵌入顶部。React导入图标/图像
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'
]
}
答
是的,这是更多钞票,看我的答案在这里:https://*.com/a/41410938/646156
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
+0
,我可以添加一个类似的问题,我引用你的问题 –
+0
正在等待这个。谢谢。 –
你为什么不使用字体图像..这将更快,没有需要为每个图标正确导入。 –