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

【问题标题】：Vue.js - best way to set background image through filterVue.js - 通过过滤器设置背景图像的最佳方法
【发布时间】：2018-11-28 05:02:47
【问题描述】：

我正在学习 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 检测？

【问题讨论】：

标签： javascript laravel vue.js

【解决方案1】：

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

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Checking for WebP browser support ..
  RewriteCond %{HTTP_ACCEPT} image/webp

  # .. and if there's a WebP version for the requested image
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

  # Well, then go for it & serve WebP instead
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

【讨论】：

那很酷，但首先我想学习 vue.js :P 另外我没有 webp 中的每张图片（例如用户上传的都是原创的），所以我想成为具体我要过滤哪些文件。

【解决方案2】：

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

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

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

你可以先检测webp的支持，既然你有图片的url字符串，你现在可以把图片格式改成webp。

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

【讨论】：