My background image thorough CSS is not working after navigating to any page but works on reload

Get Help
, ,
#1

Hello, in my Vue component, I’m using a background image in CSS and it’s not working because of an incorrect path I guess. But, somehow I manage that path but still, I can see while reloading the page it works and when I try to navigate to another route it disappears from pages and never shows on any page. Again I reloaded the page then it worked again and the same is happening. I’m providing some references:

My Image Directory::::::::>>>

src >
  assets >
      images >
          background >
               2.png

My views component “src/views/HomeVue.vue” ::::::>>>

<section id="section-testimonial" class="no-top" data-bgimage="url('../../src/assets/images/background/2.png') top">
    <div class="container">
      <div class="row">

Also, correct me if I’m putting it the wrong way of the path but this is how I managed to work with my image.
Now the concern is why this works on reloading the pages but not when I navigate to any other route.

1 Like
#2

Seems you’re missing some foundations of Vue. I suggest reading through the guide.

For your immediate issue, you should be binding the backgroundImage as a dynamic style.

1 Like
#3

Hi @prakash2raj
Try to remove data-bgimage form the <section> tag and bind the background image with :style

<section
 :style="{
      backgroundImage: `url('../../src/assets/images/background/2.png')`,
    }"
>
 <div class="container">
  <div class="row"></div>
 </div>
</section>

Hope this helps!

1 Like