因此,这是我当前通过ES6导入Webpack中的图像和图标的工作流程:
import cat from './images/cat1.jpg'
import cat2 from './images/cat2.svg'
import doggy from './images/doggy.png'
import turtle from './images/turtle.png'
<img src={doggy} />
这变得很快。这就是我想要的:
import * from './images'
<img src={doggy} />
<img src={turtle} />
我觉得必须有某种方法可以动态地从特定目录中导入所有文件(不带扩展名),然后根据需要使用这些文件。
任何人都看过此事,或者对最佳解决方案有任何想法?
更新:
使用选择的答案,我能够做到这一点:
function importAll(r) {
let images = {};
r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
return images;
}
const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));
<img src={images['doggy.png']} />
我觉得必须有某种方法可以动态地从特定目录中导入所有文件(不带扩展名),然后根据需要使用这些文件。
ES6中没有。整点import
和export
是依赖关系可被确定静态,即没有执行代码。
但是,由于您使用的是webpack,因此请参阅require.context
。您应该能够执行以下操作:
function importAll(r) {
return r.keys().map(r);
}
const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句