React 动态导入图片

Question

在我的 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>;
}

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

你建议我怎么做？

Answer 1

您可以将您的图片放在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 个（或您想要的数量）元素的数组并通过它们进行映射。

Answer 2

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

解决方案如下：

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} />
))