在反应中一次导入多个图像文件的任何简单方法答案

【问题标题】：Any easy way to import multiple image files at once in react在反应中一次导入多个图像文件的任何简单方法
【发布时间】：2020-10-22 08:27:13
【问题描述】：

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

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"

【问题讨论】：

你检查stackoverflow.com/questions/52956474/…了吗？
这与 react 无关，但实际上与您使用的捆绑器有关。你用什么捆绑器？ parcel、webpack、rollup 等？
一个简单的方法是把你所有的图像放在公共文件夹中。然后使用src='path/from/public/to/img'。不需要导入它们。

标签： javascript reactjs

【解决方案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';

【讨论】：