Vue components css background-image path error

vue.js webpack-2 vue-loader

Instead of absolute path, You should give the relative path from the current file location with webpack in .vue file, something like:

background: url(../../static/img/btn_my.b9186cc.png) no-repeat 50%;

vue.js webpack-2 vue-loader

What about setting:

build: {  ...  assetsSubDirectory: '',  assetsPublicPath: '/static/',  ...}

and so:

background: url(/static/img/btn_my.b9186cc.png) no-repeat 50%;

Working with relative paths is, in general lines, a nightmare.

vue.js webpack-2 vue-loader

:style="{ backgroundImage: 'url(\'' + require('@/assets/bg3.jpg') + '\')' }

This will be the Best solution for the background image.

CodeHunter