Question

这是我的情况：

我有一个文件夹目录，其中包含图像文件。例如：images /（ID）/（ID）-1（或2、3等）.jpg。（ID）是可变的（图像目录中有数百个ID）。

我是React的新手，但仍在尝试通过如何在其中使用循环的方法。我尝试了几种不同的方法，但似乎都没有针对这个特定案例进行工作。

我将如何构建一个循环遍历每个文件夹的循环，并动态渲染每个文件夹中的图像？我有一个轮播，想在其中调用此循环。

谢谢您的帮助。

编辑：我已经尝试使用以下两种解决方案：

根据我自己的情况：

    const images = [
  { src: './images' + (ID), alt: 'Your description here 1' }
];

// ...

{images.map(function(imageProps) {
  return (
    <li key={ imageProps.src }>
      <img src={ imageProps.src } alt={ imageProps.alt } />
    </li>
  );
})}

和

Dynamically import images from a directory using webpack

根据我自己的情况：

  function importAll(r) {
      return r.keys().map(r);
    }

    const images = importAll(require.context('./images' + (ID), false, /\.(png|jpe?g|svg)$/));

对于后者，我发现在require.context中，参数中不能包含动态变量，否则会引发错误。第一个例子告诉我.map不是函数。该错误并没有太大帮助。

如何使用React遍历图像目录

0 个答案: