在 React 上导入多个图像

我正在尝试构建一个反应应用程序，并且必须使用多个图像 ，现在我必须导入我将使用的每个图像，例如：

import image from '/img/img1.png';

<img src={img} />

或者还有其他方法吗？？？

PS：我尝试过“require”，它也给出了一个错误：

<img src={windows.location.origin +'/img/img1.png'}/>

没有输出

• 既然你使用的是 webpack，请看一下需要上下文 https://webpack.js.org/guides/dependency-management/#require-context。您应该能够导入所有 png 文件'/img' to images多变的。然后你可以使用图像images["img(n).png"].

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

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

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

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

images.js :

import img1 from "/img/img1.jpg"
import img2 from "/img/img2.jpg"
import img3 from "/img/img3.jpg"
.
.
.
import img(n) from "/img/img(n).jpg"

export default [
    img1,
    img2,
    ...
];

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

import imgs from './images';

附：请参考我的接受的答案 https://stackoverflow.com/questions/64478212/any-easy-way-to-import-multiple-image-files-at-once-in-react/64478541#64478541关于类似的问题。