相关疑难解决方法(0)

所以这是我目前通过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']} />