Magnific Popup 后备图片源

Question

如何使用具有后备图像格式的放大弹出窗口？我想将 webp 用于所有支持它的浏览器，但 jpeg 作为后备。我想在 gitlab 页面上部署我的页面，这就是为什么必须在客户端进行切换。通常一个人会做这样的事情

<picture>
    <source srcset="/path/to/image.webp" type="image/webp">
    <source srcset="/path/to/image.jpeg" type="image/jpeg">
</picture>

为 webp 格式提供后备服务，但我不知道如何使用 magnific popup 来做到这一点。这是我当前的标记：

<a class="image-popup" title="some title" href="/path/to/image.webp">
    <i class="lni lni-zoom-in"></i>
</a>

这是我的 js 代码，用于初始化 magnific popup：

$('.image-popup').magnificPopup({
  type: 'image',
  gallery:{
    enabled:true
  }
});

Answer 1

我通过直接使用 img 标签而不是 a 来做到这一点，然后在加载 webp 图像而不是设置 srcset 时处理错误：

<img src="/path/to/image.webp" data-mfp-src="/path/to/image.webp" onerror="this.onerror=null;this.src='/path/to/image.jpeg';data-mfp-src='/path/to/image.jpeg'" class="image-popup">