使用 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} />

我觉得必须有某种方法可以动态地从特定目录导入所有文件作为它们的名称 sans 扩展名，然后根据需要使用这些文件。

有人看过这件事，或者对最好的方法有什么想法吗？

---

更新：

使用选定的答案，我能够做到这一点：

 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']} />

原文由 klinore 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我觉得必须有某种方法可以动态地从特定目录导入所有文件作为它们的名称 sans 扩展名，然后根据需要使用这些文件。

不在 ES6 中。 import 和 export 的全部意义在于可以 静态 确定依赖关系，即无需执行代码。

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

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

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

原文由 Felix Kling 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这简单。您可以在 render 中使用 require （静态方法，导入仅用于动态文件）。就像下面的例子：

 render() {
    const {
      someProp,
    } = this.props

    const graphImage = require('./graph-' + anyVariable + '.png')
    const tableImage = require('./table-' + anyVariable2 + '.png')

    return (
    <img src={graphImage}/>
    )
}

原文由 Robsonsjre 发布，翻译遵循 CC BY-SA 3.0 许可协议