如何绑定：样式与对象语法和多个背景图像？答案

【问题标题】：How can I bind:style with object syntax and multiple background images?如何绑定：样式与对象语法和多个背景图像？
【发布时间】：2019-07-23 17:41:56
【问题描述】：

我想将带有object syntax 的css 样式绑定到图像。样式对象包含引用多个背景图像的 css 属性 background。不幸的是，这些图像没有显示。

模板

<v-img
    :src="require('../assets/background/bg_0.png')"
    :style="bg"
></v-img>

脚本

data() {
    return {
        bg: {
            background: "url('~@/assets/pieces/animals/animal_1.png') no-repeat center, url('~@/assets/pieces/animals/animal_3.png') no-repeat center",
            width: "300px",
            height: "300px"
    }
}
}

width 和 height 的属性正常工作，但来自background 的两个图像未显示。

我做错了什么？

感谢您的帮助！

【问题讨论】：

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

背景 CSS 在技术上是正确的，但我相信您的问题是图像路径。路径前缀~@ 在这里不起作用，因为您不需要图像，所以 Webkit 不知道它。我的建议是首先需要图像，然后将其作为常量传递给bg 对象。这将通过将代码拆分为多行来清理事情，并且仍然允许您将路径前缀用于动态 URL。

类似的东西

const animal1 = require('~@/assets/pieces/animals/animal_1.png')
const animal3 = require('~@/assets/pieces/animals/animal_3.png')
data() {
    return {
        bg: {
            background: `url(${animal1}) no-repeat center, url(${animal3}) no-repeat center`,
            width: "300px",
            height: "300px"
        }
    }
}

【讨论】：