在 React 上导入多个图像

Question

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

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

<img src={img} />

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

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

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

没有输出

Answer 1

• 由于您使用的是 webpack，请查看require.context。您应该能够将所有 png 文件导入到'/img'变量中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';

PS请参考我在类似问题上接受的答案。