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

Question

我输入以下输入图像。需要一个很短的方法来做这件事。

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"

Answer 1

• 既然你在使用webpack，请看一下require.context。您应该能够将'./imgs/Banners'中的所有png文件导入到images变量中。然后您可以使用图像通过images["banner(n).png"]。

function importAll(r) {
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
}

const images = importAll(require.context('./imgs/Banners', false, '/\.jpg/'));

<img src={images["banner1.png"]} />

• 以另一种方式，您可以使用专用于这些导入的文件：

images.js：

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';