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?
Another solution:
<template>
<div :style="cssProps"></div>
</template>
<script>
export default {
data() {
return {
cssProps: {
backgroundImage: `url(${require('@/assets/path/to/your/img.jpg')})`
}
}
}
}
</script>
What makes this solution more convenient? Firstly, it's cleaner. And then, if you're using Vue CLI (I assume you do), you can load it with webpack.
Note: don't forget that require() is always relative to the current file's path.
I experienced an issue where background images with spaces in the filename where causing the style to not be applied. To correct this I had to ensure the string path was encapsulated in single quotes.
Note the escaped \' in my example below.
<div :style="{
height: '100px',
backgroundColor: '#323232',
backgroundImage: 'url(\'' + event.image + '\')',
backgroundPosition: 'center center',
backgroundSize: 'cover'
}">
</div>
I tried @david answer, and it didn't fix my issue. after a lot of hassle, I made a method and return the image with style string.
HTML Code
<div v-for="slide in loadSliderImages" :key="slide.id">
<div v-else :style="bannerBgImage(slide.banner)"></div>
</div>
Method
bannerBgImage(image){
return 'background-image: url("' + image + '")';
},
The accepted answer didn't seem to solve the problem for me, but this did
Ensure your backgroundImage declarations are wrapped in url( and quotes so the style works correctly, no matter the file name.
ES2015 Style:
<div :style="{ backgroundImage: `url('${image}')` }"></div>
Or without ES2015:
<div :style="{ backgroundImage: 'url(\'' + image + '\')' }"></div>
Source: vuejs/vue-loader issue #646
Based on my knowledge, if you put your image folder in your public folder, you can just do the following:
<div :style="{backgroundImage: `url(${project.imagePath})`}"></div>
If you put your images in the src/assets/, you need to use require. Like this:
<div :style="{backgroundImage: 'url('+require('@/assets/'+project.image)+')'}">.
</div>
One important thing is that you cannot use an expression that contains the full URL like this project.image = '@/assets/image.png'. You need to hardcode the '@assets/' part. That was what I've found. I think the reason is that in Webpack, a context is created if your require contains expressions, so the exact module is not known on compile time. Instead, it will search for everything in the @/assets folder. More info could be found here. Here is another doc explains how the Vue loader treats the link in single file components.
