background image url is wrong

[ttquoccuong]

I add background-image in
App.vue (Ex: ./assets/background.jpg)
or Hello.vue (Ex: ./../assets/background.jpg)

When i run dev, anything is working
but when i build product, background image url in CSS is wrong,
it become /dist/static/css/static/img/bg.2d0dc72.jpg

my image is in "assets/bg.jpg"

so sorry, because my english is not good!
tks

[chrisvfritz]

Can you please link to an example repo showing the problem?

[ttquoccuong]

https://github.com/ttquoccuong/webpacktemplatedemo

this is repo demo,
In config/index.js, i changed assetsPublicPath to empty or ./ for true url when build production
please help me check it in console, url in css is wrong

[cn-wang]

me too.

npm run build
background image url is wrong

[UncleBill]

@ttquoccuong @cn-wang
Could you try this patch

-cp('-R', 'static/', assetsPath)
+cp('-R', 'static/', config.build.assetsRoot)

for build/build.js?
It fixed "static/ path" errors in my project. If it helps you too, I will send a PR.

[chrisvfritz]

I believe this should be working now. @ttquoccuong @cn-wang @UncleBill Can any of you confirm?

[Grawl]

I have the same issue on my Jew Simulator project.

In dev mode all ok, but on GitHub Pages (mapped to my grawl.ru domain) all paths is broken because of subfolder format of page URL.

(index):1 GET http://grawl.ru/static/css/app.dc454ff2e8238ad1b90c392fa2d58bef.css 
(index):13 GET http://grawl.ru/static/js/vendor.9ebc35085301b3fd2a78.js 
(index):13 GET http://grawl.ru/static/js/app.1c4025e87bc7c5561961.js 
(index):13 GET http://grawl.ru/static/js/manifest.3f7c904ffbdc032d2076.js 
(index):13 GET http://grawl.ru/static/js/manifest.3f7c904ffbdc032d2076.js 
(index):13 GET http://grawl.ru/static/js/vendor.9ebc35085301b3fd2a78.js 
(index):13 GET http://grawl.ru/static/js/app.1c4025e87bc7c5561961.js 404 (Not Found)

So I changed build.assetsPublicPath from '/' to '' in config/index.js#L10 and now all assets is loaded.

But not images used in CSS url().

http://grawl.ru/static/images/SteamBackground.jpg Failed to load resource: the server responded with a status of 404 (Not Found)

There is no grawl.ru/static and I will loose all background-images from CSS so.

Here it is: https://github.com/Grawl/jew-simulator/blob/master/src/app.sass#L48

In hope of underhood magic I change

background-image: url('/static/images/OdessaModeBackground.jpg')

to

background-image: url('../static/images/OdessaModeBackground.jpg')

And I have another problem:

jquery.js:5800 GET http://jew-simulator.local/dist/static/css/static/img/SteamBackground.cad85a4.jpg 404 (Not Found)

It's strange how I got dist/static/css/static/img from just ../

@chrisvfritz

[sndrgb]

Someone resolve this guys?
I have also the same problem when i run dev.

I start with:
vue init webpack project

and then i only try loading a div with a background-image as INLINE style with the same url of the example logo.png

someone know why?

[Grawl]

@sndrgb I want to try vbuild. Already migrated and the last part is deploy it on my domain.

[Didel]

I had similar issues, but my fix was quite easy:

On line 10 of /config/index.js, I changed the assetsPublicPath from / to ./. By doing so, the file locations won't be absolute on the server, but relative to the index.html file they are referenced by.

To me, this appears to be a better default value as it won't cause the errors I and others have.

[githoniel]

just modify the publicPath for url-loader like

 test: /\.(png|jpe?g|gif)(\?.*)?$/,
 loader: 'url-loader',
 options: {
             limit: 10000,
             name: utils.assetsPath('img/[name].[hash:7].[ext]'),
             publicPath: env === 'production' ? '../../' : '/'
}