Question

我正在学习Vue.js.在我的网站上，我有两种格式的相同图像 - jpg和webp。我想通过一些过滤器生成正确的图像链接取决于浏览器支持（有或没有.webp）。我现在不需要进行此检测，我只想知道在Vue中设置“background-image”和img“src”的最佳方法是什么。

这就是我现在所拥有的：

<template>
    <div>
        <div v-bind:style="{ backgroundImage: 'url(' + webp('/images/demo.jpg') + ')' }">
            <div class="container" style="min-height: 520px">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="card card-default">
                            <div class="card-header">Example Component</div>

                            <div class="card-body">
                                <img v-bind:src="'/images/demo2.jpg' | webp">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</template>

<script>
    export default {

        methods: {
            webp(url) {
                // here will be code to detect webp support
                return url + '.webp';
            }
        },

        filters: {
            webp(url) {
                // here will be code to detect webp support
                return url + '.webp';
            }
        },

        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

它有效，但这是正确的方法吗？第一个问题是我尝试使用过滤器，因为它对我来说看起来更干净。在img src中它可以工作，但在v-bind：style我必须使用方法。现在在脚本中我有单独的方法和过滤器做同样的，这是不好的...我试图使用过滤器，但这不起作用：

<div v-bind:style="{ backgroundImage: 'url(' + '/images/bg.jpg' | webp + ')' }">

我不需要动态更改图像，因此我尝试使用标准样式并使用小胡子：

<div style="background-image: url({{ '/images/bg.jpg' | webp }} ">

但这会导致“内部属性内插已删除。”

实现这一目标的最佳，正确和干净的方法是什么，所以我可以在background-image和img src中使用我的webp检测？

Answer 1

不确定这是否适合您，但我认为this Kirby CMS plugin处理WebP的方式很聪明 - 它检测到服务器配置中的WebP支持并将任何请求重定向到*.jpg到{{1 }}。此示例适用于Apache，但应该可以采用与其他服务器类型相同的方法。

*.webp

Answer 2

一种解决问题的可能方法，像这样更改模板：

<div class="invite-container" :style="{backgroundImage: `url(${someBackgroundUrl})`} | imageFilter">

在函数imageFilter(value)中，value是一个对象，即{backgroundImage: "url(https://somesite.com/img.png)"}

您可以先检测到webp的支持，并且由于有了图像URL字符串，因此可以立即将图像格式更改为webp。

最后，返回webp格式的Object。例如{backgroundImage: "url(https://somesite.com/img.png/webp)"}

Vue.js - 通过过滤器设置背景图像的最佳方式

2 个答案: