Question

我有一个使用SearchKit的搜索应用程序（Elasticsearch和React。）当用户单击结果的图像缩略图时，会弹出带有轮播的灯箱。每个结果由不同的ID号定义。我有一个子文件夹目录，该目录反映每个子文件夹的这些ID，以及子文件夹内的图像。这些文件夹有数千个。

路径为"./img" + (ID) + "/" + (ID) + "-1.jpg"，"./img" + (ID) + "/" + (ID) + "-2.jpg"，"./img" + (ID) + "/" + (ID) + "-3.jpg"，"./img" + (ID) + "/" + (ID) + "-4.jpg"等。

我希望应用程序进入相应的子文件夹，检索图像并将其显示在轮播中。每个ID号之间的图像数量会有所不同。有些没有图像，另一些则高达20。

现在，我刚刚建立了一个范围在0到10之间的数组，并将“ -1.jpg”等值绑定到该数组。明显的问题是轮播会显示11个选择，但是如果文件中只有4张图像，则剩余的7个插槽会损坏。

这是我到目前为止的代码：

const i = Array.from({length:10}, (_, x) => x)

{i.slice(0).map((i, index) => (<img 
  src={"./img/" + (ID) + "/" + (ID) + "-" + (index + 1) + ".jpg"}
/>))}

我不能使用require.context，因为路径将始终包含一个变量。鉴于我已建立的目录，这是我到目前为止最接近的。

我即将结束该项目，这确实是我面临的最后一个大障碍。非常感谢您提前提供的帮助。 React的新手，所以我试图将其推到生产线上。

需要帮助来尝试在React中显示图像的动态目录

0 个答案: