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.
UPDATE: One other note about why you may have trouble getting this to work.
You should make sure your image value is quoted so that the end resulting string is:
url('some/url/path/to/image.jpeg')
Otherwise, if your image URL has special characters in it (such as whitespace or parentheses) the browser may not apply it properly. In Javascript, the assignment would look like:
this.image = "'some/url/path/to/image.jpeg'"
or
this.image = "'" + myUrl + "'"
Technically, this could be done in the template, but the escaping required to keep it valid HTML isn't worth it.
More info here: Is quoting the value of url() really necessary?