Sometimes, we want to fix Vue.js data-bind style background image not working with JavaScript.
In this article, we’ll look at how to fix Vue.js data-bind style background image not working with JavaScript.
How to fix Vue.js data-bind style background image not working with JavaScript?
To fix Vue.js data-bind style background image not working with JavaScript, we set the 'background-image' property.
For instance, we write
<template>
<div :style="cssProps"></div>
</template>
<script>
export default {
data() {
return {
cssProps: {
`background-image': `url(${require('@/assets/path/to/your/img.jpg')})`
}
}
}
}
</script>
to define the cssProps reactive property that sets the “background-image’` to the URL string with the background image URL.
We use require to resolve the image URL to the right location.
Conclusion
To fix Vue.js data-bind style background image not working with JavaScript, we set the 'background-image' property.
