Javascript 在react中一次导入多个图像文件的任何简单方法

我键入以下内容以导入图像。需要一个简短的方法来做到这一点

import banner1 from "./imgs/Banners/banner1.jpg"
import banner2 from "./imgs/Banners/banner2.jpg"
import banner3 from "./imgs/Banners/banner3.jpg"
import banner4 from "./imgs/Banners/banner4.jpg"
import banner5 from "./imgs/Banners/banner5.jpg"
import banner6 from "./imgs/Banners/banner6.jpg"
import banner7 from "./imgs/Banners/banner7.jpg"
import banner8 from "./imgs/Banners/banner8.jpg"
import banner9 from "./imgs/Banners/banner9.jpg"
.
.
.
import banner(n) from "./imgs/Banners/banner(n).jpg"

• 由于您正在使用webpack，请查看。您应该能够将

  './imgs/banner'

  中的所有png文件导入

  图像

  变量。然后您可以通过

  图像[“banner（n）.png”]

  使用图像

然后在其他文件的一行中导入此数组：

import banners from './images';

---

您检查了吗？这与react无关，但实际上与您使用的捆绑机有关。你用什么捆绑机？包裹、网页包、汇总等？一种简单的方法是将所有图像放入公用文件夹。然后使用as

src='path/from/public/to/img'

。不需要导入它们。

import banner1 from "./imgs/Banners/banner1.jpg"
import banner2 from "./imgs/Banners/banner2.jpg"
import banner3 from "./imgs/Banners/banner3.jpg"
import banner4 from "./imgs/Banners/banner4.jpg"
import banner5 from "./imgs/Banners/banner5.jpg"
import banner6 from "./imgs/Banners/banner6.jpg"
import banner7 from "./imgs/Banners/banner7.jpg"
import banner8 from "./imgs/Banners/banner8.jpg"
import banner9 from "./imgs/Banners/banner9.jpg"
.
.
.
import banner(n) from "./imgs/Banners/banner(n).jpg"

export default [
    banner1,
    banner2,
    ...
];

import banners from './images';