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

Posted 2023-02-22

【中文标题】Magento 2 - 如何在 Fotorama JS 中替换 webP 图像

【英文标题】：Magento 2 - How to replace webP image in Fotorama JS

【发布时间】：2022-01-23 01:19:08

【问题描述】：

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

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

谢谢

【参考方案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>