在 React 上导入多个图像答案

【问题标题】：Import multiple images on React在 React 上导入多个图像
【发布时间】：2021-03-03 11:06:42
【问题描述】：

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

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

<img src={img} />

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

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

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

没有输出

【问题讨论】：

这取决于您的构建设置。假设资产位于静态位置，您也可以直接使用资产的相对链接。 “src='/img/img1.png'”，或者将其导入为 base64（但这也取决于构建工具）。
stackoverflow.com/questions/39999367/… 这应该会有所帮助

标签： javascript reactjs jsx create-react-app

【解决方案1】：

如果你使用的是 ES6+，你可以使用 iteral。如下所示。

const imageNames = ['img1.jpg', 'img2.jpg', 'img3.jpg']

render() {
  ...
  imageNames.map(image => <img src={`/img/${image}`}></img>)
  ...
}

【讨论】：

【解决方案2】：

由于您使用的是 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。

【讨论】：