Magnific Popup后备图像源

Question

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

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

为webp格式提供后备广告，但我不知道如何通过宏弹出框来完成此操作。这是我当前的标记：

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

这是我的js代码，用于初始化大型弹出窗口：

$('.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">