动态反应导入图像

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张图片。近百张图片怎么办？此外，在图像组件的 src 部分，我无法将此结构用于 100 张图像。

你建议我做什么？

Answer 1

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

在“何时使用 public 文件夹”标题下的 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} />
))

动态反应导入图像

React Dynamically Import Images

image

dynamic-import

reactjs

conditional-rendering

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