Sometimes, we want to fix dynamic background image style not working in Vue.js.
In this article, we’ll look at how to fix dynamic background image style not working in Vue.js.
How to fix dynamic background image style not working in Vue.js?
To fix dynamic background image style not working in Vue.js, we can interpolate the background image URL into a string.
For instance, we write
<template>
<div :style="{ 'background-image': `url(${image})` }"></div>
</template>
to set the style
prop to an object with the background-image
property set to url(${image})
.
This sets the background-image
CSS property to the URL of the background image if image
is has the background image URL.
Conclusion
To fix dynamic background image style not working in Vue.js, we can interpolate the background image URL into a string.