Magento 2 - 如何在 Fotorama JS 中替换 webP 图像答案

【问题标题】：Magento 2 - How to replace webP image in Fotorama JSMagento 2 - 如何在 Fotorama JS 中替换 webP 图像
【发布时间】：2022-01-23 01:19:08
【问题描述】：

我正在尝试添加 图片标签，以控制浏览器根据支持的版本显示 webP 图像或实际图像。

你能帮忙把它添加到fortorma.js中吗

谢谢

【问题讨论】：

标签： magento magento2 webp fotorama

【解决方案1】：

<script type="text/x-magento-init">
{
    "[data-gallery-role=gallery-placeholder]": {
        "mage/gallery/gallery": {
            "mixins":["magnifier/magnify"],
            "magnifierOpts": <?= /* @noEscape */ $block->getMagnifier() ?>,
            "data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
            "options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
            "fullscreen": <?= /* @noEscape */ $block->getGalleryOptions()->getFSOptionsJson() ?>,
             "breakpoints": <?= /* @noEscape */ $block->getBreakpoints() ?>
        }
    }
}

<script>
    require([
        'jquery'
    ], function ($) {
        $(function () {
            let $placeholder = $('.gallery-placeholder');
            let gallery = null;

            $placeholder.on('gallery:loaded', function () {
                gallery = $placeholder.data('gallery');
            });

            $('.radio .item').on('click', function(){
                $('.radio .item').removeClass('selected');
                $(this).addClass('selected');

                if (gallery) {
                    let images = $(this).find('script').html();
                    if (images) {
                        // this should replace the existing images...
                        gallery.updateData(JSON.parse(images));
                    }
                }
            });
        });
    });
</script>

【讨论】：