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

时间:2018-12-03 18:52:11

标签: javascript reactjs

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

0 个答案:

没有答案