使用webpack从目录动态导入图像

临床:

因此,这是我当前通过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']} />
费利克斯·克林(Felix Kling):

我觉得必须有某种方法可以动态地从特定目录中导入所有文件(不带扩展名),然后根据需要使用这些文件。

ES6中没有。整点importexport是依赖关系可被确定静态,即没有执行代码。

但是,由于您使用的是webpack,因此请参阅require.context您应该能够执行以下操作:

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章