Sometimes, we want to set a background image in a style attribute with Vue.js.
In this article, we’ll look at how to set a background image in a style attribute with Vue.js.
How to set a background image in a style attribute with Vue.js?
To set a background image in a style attribute with Vue.js, we can set the style prop to an object with the background-image property.
For instance, we write
<template>
<div>
<div
class="card-image"
:style="{
'background-image': `url(${require('@/assets/images/cards.jpg')})`,
}"
>
...
</div>
</div>
</template>
to set the style prop to an object with the background-image property set to a string with the path of the background image wrap around url().
@/ is a shorthand for the src folder.
Conclusion
To set a background image in a style attribute with Vue.js, we can set the style prop to an object with the background-image property.
