Looking to create a dynamic navbar and change its background image. I attempted the following:
Here is my attempt:
<b-navbar toggleable="lg" v-bind:style="headerStyle">
this.headerStyle = {
backgroundImage: 'url("../../assets/img/sky-views/3.png") !important'
}
After trying this and inspecting it, I encountered the following:
https://i.sstatic.net/bFGT0.png
The image was not displayed as it could not be found.
However, when I added a class to the element and applied the same path to the class, the image appeared:
<b-navbar toggleable="lg" class="header-wrapper">
...
<style lang="scss">
.header-wrapper {
background-image: url("../../assets/img/sky-views/3.png") !important;
}
</style>
Upon inspection, I noticed the following:
https://i.sstatic.net/liriD.png
What am I missing here? Why is the resulting path different? How can I fix this issue?