javascript - 在 React 上导入多个图像

Question

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

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

<img src={img} />

还是有别的办法？？？，
PS:我试过“要求”，它也给出了一个错误:

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

没有输出

Answer 1

由于您使用的是 webpack，请查看 require.context .您应该可以导入'/img' 中的所有png 文件。至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';

附:请引用我的 accepted answer关于类似的问题。