How I can set dynamic background image in Vue

Question

I want to make my navbar dynamic. I want to change it's background image.

I try this:

<b-navbar toggleable="lg"v-bind:style="headerStyle">
this.headerStyle = {
                    backgroundImage: 'url("../../assets/img/sky-views/3.png") !important'
                }

When I do that and inspect it I see this:

And there is no image, it cant find the image.

But when I add a class to element and give same path to class it show the image.

<b-navbar toggleable="lg" class="header-wrapper">
...
    <style lang="scss">
    .header-wrapper {
            background-image: url("../../assets/img/sky-views/3.png") !important;
        }
    </style>

When I inspect I see:

What is the point I miss? Why the result path is different? How can I make it properly?

Neill · Accepted Answer · 2023-03-29 19:58:26Z

When Webpack compiles your Vue application, it knows to convert CSS url() paths to their compiled counterparts. However, this.headerStyle is just an arbitrary object variable in a Vue component script: Webpack doesn't have the context to transform that URL.

In an answer to a similar question, the require() function is recommended for asking Webpack to transform the URL. For your script in particular, the new variable would look something like:

this.headerStyle = {
  backgroundImage: `url("${require('../../assets/img/sky-views/3.png')}") !important`
}

And you would v-bind:style="headerStyle" the exact same way in the template.

Note that the output will be dependent on how your build is configured. In my testing, I got a huge base64-encoded string by default in the outputted style attribute (rather than a URL to an asset). However, the end visual result was the same.

I2mNew · Accepted Answer · 2023-03-30 06:14:40Z

0

Another way that I found is give dynamic class name.

<b-navbar toggleable="lg"v-bind:class="headerClass">
...
this.headerClass= 'night'
...
.night {
            background-image: url("../../assets/img/sky-views/nightImage.png") !important;
        }
</style>

edited Mar 30, 2023 at 6:14

answered Mar 29, 2023 at 20:12

I2mNew

1733 silver badges13 bronze badges

Collectives™ on Stack Overflow

How I can set dynamic background image in Vue

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related