从SVG图标打开fancybox画廊，但在右侧拇指列表中显示原始图像

问题描述

我在许多项目中都使用过fancybox。通常，我会从图像拇指触发图像弹出屏幕，但是现在我必须从img类中的SVG图标触发它。 fancybox接受该图标并将其显示在右侧拇指列表上。它应该显示来自具有data-fancybox 属性的标签的实际图像。

以下是将图像拇指作为弹出触发器的正常工作方式：

<a href="image.jpg" data-fancybox="gallery">
   <img class="thumb" src="image.jpg">
</a>

这将达到预期效果，画廊弹出窗口打开，右侧列表中包含正确的图像。

但是现在，当我使用SVG图标触发弹出窗口时，它会在右侧画廊缩略图列表中显示SVG。

<a href="image.jps" data-fancybox="gallery">
   <img src="img/zoom_plus.svg" style="height:50px;">
</a>

有人有同样的需求，您是如何解决的？找不到原始文档中的信息：https://fancyapps.com/fancybox/3/docs/

解决方法

我通过在图标图像之前添加图像并将其显示设置为无来解决问题。它现在正在运行，但想知道它是如何正确完成的。

<a href="image.jps" data-fancybox="gallery">
   <img src="image.jpg" style="display:none;">
   <img src="img/zoom_plus.svg" style="height:50px;">
</a>

使用data-fancybox-trigger属性，请参阅文档-https://fancyapps.com/fancybox/3/docs/#usage

fancybox html javascript