background url(./barbar.png) doesn't work

[burgalon]

When using background image in CSS, e.g:

.home {
    text-align: center;
    background: url('./barbar.png')
}

the compiled CSS seems to resolve the asset fine, however the browser is trying to load it relatively to the blob:// css file which was injected to the HEAD causing an incorrect host name by Chrome

[altaywtf]

Hello @burgalon, since we have postcss-assets plugin, I suggest you to load images to your styles by using its functionalities.

background: inline('./barbar.png');

[burgalon]

Hey @altayaydemir Inlining an image requires them to be base64 encoded into the CSS which isn't very efficient for big images.
postcss-assets allows also to resolve regular images and rewrite the path, however this does not seem to work well together with the current stack, possible because of the helmet head changes and the fact that the CSS is loaded through blob://http....

[basicsharp]

It seems that this problem occurs when we enable the sourceMap option on css-loader.

There are opening PRs for solving this issue in webpack/style-loader repo:

• Add Option To Fix Relative Urls webpack-contrib/style-loader#124
• Make urls absolute in blob webpack-contrib/style-loader#96

[OR13]

Is this issue still a thing?

if so, can we get clear steps to reproduce?

[bherila]

Yep, I had the same issues with fonts. It was resolved by disabling the sourceMap option as @basicsharp described above.

[bherila]

So I guess this and #142 are dupes.