Search code examples
github-pages

How to fix paths to background images while deploying vue app to gh-pages?

I'm deploying my vue-app to gh-pages and facing a problem with loading background images.

Here is structure of my project

enter image description here

And here link to my project on gh-pages live.
You can see that images from img tags are loading and also svg files are loading but background-images which are not svg are not (all my background-images are in img folder).

I can see in console what paths are messed up - they should be static/img/footer.88ceaa2.png but instead they are static/css/static/img/footer.88ceaa2.png

Should paths to backgrounds be different in my components or is it something in my config file? Any help will be much appreciated.

Link to repo

Solution

  • I have same problem with Nuxt and there is a way to work around by binding style as inline

    :style="{ backgroundImage: 'url(' + require('@/assets/imgs/assets/img/header.png') + ')' }"