Reactjs 动态导入图像

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

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

是否有类似上述的导入语句

这是一个包含两个图像的示例：

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>;
}

从“React”导入React；
导入“/App.css”；
从“./images/0.jpeg”导入Image1；
从“/images/1.jpeg”导入Image2；
const images=Array.from（{length:2}，（u，i）=>{
返回(
);
});
导出默认函数App（）{
返回{images}；
}

上面的代码只包含2个图像。我应该如何处理近100幅图像？另外，在image组件的src部分，我不能将此结构用于100个图像

---

您建议我怎么做？

您可以将图像放入文件夹或s3存储桶等

在CRA文件中“何时使用公用文件夹”标题下；如果“您有数千个图像，需要动态引用它们的路径”，则建议使用此选项

然后你可以做这样的事情

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

新阵列（15）
.填写（1）
.map（（u，i）=>({
}))

---

小注：

Array（15）。fill（1）

基本上是指创建15个元素的数组，然后将1放入其中。由于我们无法对jsx中的循环执行

，因此我们创建了一个包含15个（或您想要多少个）元素的数组，并通过它们进行映射。
在加载图像等资产的情况下，您可以通过同步加载它们。假设您在
网页
配置中使用
文件加载器

解决方案如下所示：

const images=Array.from（{length:2}，（u，i）=>{
返回(
);
});

基于新请求而不知道名称的更新
如果不知道文件名，您可以按以下方式选择
require.context
加载所需内容：

const templates=require.context（'./images'，true，/\.（jpg|jpeg）$/）；
常量图像=templates.keys（）.map（（elem）=>(
))
如何将文件加载器添加到网页包配置？我不为网页包使用ant附加配置。所有配置都来自create-react-app。另外，我想问一个问题。如果我不知道图像的数量，我如何编写这种情况下的代码？如果你使用CRA，它已经为你设置好了，所以你只需使用代码而不配置任何东西。我给你提出了另一个建议，如何在不知道文件名的情况下在webpack中加载图像我很高兴你的其他解释。也许，你的补充解释解决了我的问题与无限数量的图像情况。我将在我的应用程序中尝试这些代码，并在此处添加我的评论。嗨，埃米尔，谢谢你的评论。数字15是否指定数组的长度？例如，如果我不知道图像的数量，（比如说，我通过我的代码将这些图像上传到存储中，而不知道图像的数量。我想从云存储中检查这些图像）我如何处理这种情况，你知道吗？对不起，我应该说得更清楚。数组（15）。填充（1）基本上是指创建15个元素数组，然后将1放入其中。因为我们不能在jsx中处理循环，所以我们创建了一个包含15个（或您想要多少个）元素的数组，并通过它们进行映射。关于你的另一个问题；如果我们的react应用程序是客户端，而不是使用像nextjs这样的框架，我们就无法访问计算机或服务器中的文件系统。我们必须知道数组的元素，才能通过它们进行映射。你可以在你的后端检查它，并从你的api返回一个带有URL的图像元素数组，然后像随意的api调用响应一样，映射它们；我相信他们有api响应，告诉你有多少图片在你的桶的文件夹与他们的网址。如果您有自己的后端，也可以这样做，创建一个返回文件及其URL的端点。