我有一个使用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的新手,所以我试图将其推到生产线上。