Vue.js数据绑定风格backgroundImage不起作用 [英] Vue.js data-bind style backgroundImage not working

问题描述

我试图在一个元素中绑定图像的src，但它似乎不起作用。我得到一个Invalid expression。Generated function body：{backgroundImage：{url（image）}。 文档说要使用'Kebab-case'或'camel-case'。

< div class =circularv-bind：style ={backgroundImage：{url（image）}>< / div>

这里是一个小提琴： https：/ /jsfiddle.net/0dw9923f/2/

解决方案

问题是， backgroundImage 需要是这样的字符串：

 < div class =circularv -bind：style ={backgroundImage：'url（'+ image +'）'}>< / div> 
  

下面是一个简单的小提琴： https://jsfiddle.net/89af0se9/1/

Re：关于kebab-case的评论，这是你如何做到这一点：

 < div class =circularv-bind：style ={ background-image'：'url（'+ image +'）'}>< / div> 
  

换句话说， v-bind：style 只是一个简单的Javascript对象，遵循相同的规则。

I'm trying to bind the src of an image in an element, but it doesn't seem to work. I'm getting an "Invalid expression. Generated function body: { backgroundImage:{ url(image) }".

The documentation says to use either 'Kebab-case' or 'camel-case'.

<div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div>

Heres a fiddle: https://jsfiddle.net/0dw9923f/2/

解决方案

The issue is that the value for backgroundImage needs to be a string like this:

<div class="circular" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"></div>

Here's a simplified fiddle that's working: https://jsfiddle.net/89af0se9/1/

Re: the comment below about kebab-case, this is how you can do that:

<div class="circular" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>

In other words, the value for v-bind:style is just a plain Javascript object and follows the same rules.

这篇关于Vue.js数据绑定风格backgroundImage不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！