动态导入图片的React实现

Question

动态导入图片的React实现

reactjsimagedynamic-importconditional-rendering

3

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

上面的代码只包含了两张图片。如果有近100张图片，我该怎么办？而且，在图片组件的src部分，我不能使用这种方式来处理100张图片。

你有什么建议吗？

- Utku Demir

2个回答

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

- tmhao2005

如何将file-loader添加到webpack配置中？我没有为webpack使用任何额外的配置。所有的配置都来自create-react-app。 - undefined

另外，我还想问一个问题。如果我不知道图片的数量，我该如何编写针对这种情况的代码？ - undefined

如果您使用CRA，它已经为您设置好了，所以您只需直接使用代码，无需进行任何配置。 - undefined

我给你提了另一个建议，关于如何在Webpack中加载图片而不知道文件名。 - undefined

非常感谢您提供的额外解释。也许，您的额外解释解决了我在图片数量不确定的情况下遇到的问题。我会在我的应用程序中尝试这些代码，并在这里添加我的评论。 - undefined

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Emre A · Accepted Answer

你可以将你的图片放在public文件夹中，或者一个S3桶等等。

在CRA文档的“When to Use the public Folder”标题下，如果“您有成千上万张图片，并需要动态引用它们的路径”，建议使用该文件夹。

然后你可以这样做；

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（或其他数字）个元素的数组，并通过它们进行映射。