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?
<div :style="{'background-image': 'url(' + require('./assets/media/img.jpg') + ')'}"></div>
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.
<div :style="{ backgroundImage: `url(${post.image})` }">
there are multiple ways but i found template string easy and simple
For single repeated component this technic work for me
<div class="img-section" :style=img_section_style >
computed: {
img_section_style: function(){
var bgImg= this.post_data.fet_img
return {
"color": "red",
"border" : "5px solid ",
"background": 'url('+bgImg+')'
}
},
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With