reactjs - React JS FSLightbox 包图像加载路径错误

Question

我正在使用 FSLightbox 包在轮播中显示图片库，但是当我点击图片时，它会显示无效来源的消息。它只显示作为 URL 给出的图像和视频，而不是来自我自己的路径。已经使用 {in1} 但它不起作用。任何人都知道如何设置图像路径。检查附加的图像。注意：您能否建议我使用任何其他软件包来将图片库显示为轮播。

标签： reactjs

Answer 1

当 FsLightbox 由于 CORS 策略而无法自动检查源的类型时，可能会导致此问题。

如果您可以在源中启用 CORS，这将得到修复。

如果您无法启用 CORS，您可以通过将“type”或“types”属性传递给灯箱来手动设置每个来源的类型。

可用类型：

1. 图片
2. 视频
3. YouTube

示例代码

<FsLightbox
   toggler={lightboxController.toggler}
   slide={lightboxController.slide}
   sources={[...photos, ...videos]}
   types={
     [
       ...new Array(photos.length).fill('image'),
       ...new Array(videos.length).fill('youtube')
     ]
   }
   key={lightboxController.key}
/>

如果您需要获取 API 的图像，则使用 key props，因为 FsLightBox React 仅用于静态链接，因此每次获取图像/视频以重新渲染组件时，您都必须更新密钥。