React 动态导入图片 基于不知道名称的新请求的更新

问题描述

在我的 React 代码中，我想在我的文件夹中显示多个图像。我有大约 100 张图像，我不想在不同的导入语句中导入所有图像。我想用图像的索引导入它们。以下是我的意思：

import LoadImages from './images/${index}.jpeg';

有没有像上面那样的import语句？

这是一个有两张图片的例子：

import React from 'react';
import './App.css';
import Image1 from './images/0.jpeg';
import Image2 from './images/1.jpeg';

const images = Array.from({ length: 2 },(_,i) => {
  return (
    <img
      src={i === 0 ? Image1 : Image2}
      alt={i.toString()}
      key={i}
      style={{ marginBottom: '3%',marginTop: '3%' }}
    />
  );
});

export default function App() {
  return <div className='App'>{images}</div>;
}

上面的代码只包含 2 张图片。我应该如何处理近 100 张图像？此外，在图像组件的 src 部分，我无法将这种结构用于 100 张图像。

你建议我做什么？

解决方法

您可以将图像放在 public 文件夹或 s3 存储桶等中。

在“何时使用公共文件夹”标题下的 CRA 文档中；如果“您有数以千计的图像并且需要动态引用它们的路径”，则建议使用它。

然后你可以做这样的事情；

new Array(15)
  .fill(1)
  .map((_,i) => ({
    <img
      src={"/public/images/" + i + ".jpeg" }
      key={i}
      className="img-fluid"
    />
  }))

小注：Array(15).fill(1) 基本上意味着创建 15 个元素的数组，然后将 1 放入其中。由于我们无法在 jsx 中执行 for 循环，因此我们创建了一个包含 15 个（或您想要的数字）元素的数组并通过它们进行映射。

,

如果加载图像等资产，您可以通过 require 同步加载它们。假设您在 file-loader 配置中使用 webpack。

解决方案如下：

const images = Array.from({ length: 2 },(_,i) => {
  return (
    <img
      src={require(`./images/${i}`).default}
      alt={i.toString()}
      key={i}
      style={{ marginBottom: '3%',marginTop: '3%' }}
    />
  );
});

基于不知道名称的新请求的更新

如果不知道文件名，您可以通过 require.context 加载您需要的内容，如下所示：

const templates = require.context('./images',true,/\.(jpg|jpeg)$/);

const images = templates.keys().map((elem) => (
  <img key={elem} src={templates(elem).default} />
))