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

Question

因此，这是我当前通过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']} />

Answer 1

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

ES6中没有。整点import和export是依赖关系可被确定 静态 ，即没有执行代码。

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

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

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