search

m0dch3n / vue-cli-plugin-cordova

Vue Cli 3 Cordova Plugin
MIT License
417 stars 63 forks source link

Accessing public images from CSS file in production cordova build. #60

Closed mattyforth closed 5 years ago

mattyforth commented 5 years ago

I'm having trouble getting my image paths to work within my CSS files when building my cordova app for production. I have this image path, that compiles correctly through webpack, however because it has a slash at the beginning of the path, my cordova app cannot find the image correctly, as it can't have a trailing slash at the start of the path.

background-image: url('/img/backgrounds/spots/lime.jpg');

I have set publicPath within my vue.config.js: publicPath: ''

Once running on the phone it tries to reference this image:

background-image: url(/img/backgrounds/spots/navy.jpg)

However it requires it to be this filepath:

background-image: url(img/backgrounds/spots/navy.jpg)

How can I make sure that within my cordova production build I don't have the slash at the start of the path. I also cannot remove the slash out of the path within the CSS file, because then webpack will fail to compile all-together.

Hope that makes sense, thanks in advance.

m0dch3n commented 5 years ago

this is more a webpack configuration issue, than an issue which needs to be resolved within the plugin...

I did not read this, but I think it's maybe solving your problem

https://github.com/webpack-contrib/file-loader/issues/46

and maybe

https://github.com/webpack-contrib/file-loader/issues/46#issuecomment-258656602

If not, search on google for webpack relative paths images

Anyway, I'm closing this issue, as it's not related to the plugin...