Referencing images from css

Noob question again: How do I reference images in my css? I’m doing this (the image is next to the css file in the folder):

.poster {
    background: url(./hero-banner.jpg) no-repeat;
    background-size: cover
}

The outputted css is:

._33hlffvz0sgxpxLxtaBGAu {
    background: url(/b1e8ba2d0f312bdf6d0011f87d91bed1.jpg) no-repeat;
    background-size: cover;
}

The image dosen’t show up (and I can’t open it in a new tab, for instance).

If I do this:

.poster {
    background: url(/hero-banner.jpg) no-repeat;
    background-size: cover
}

The outputted css is:

._33hlffvz0sgxpxLxtaBGAu {
    background: url(/hero-banner.jpg) no-repeat;
    background-size: cover;
}

But the image still dosen’t show, and if I try to open the image in a new tab, this is the url I get: chrome-devtools://devtools/hero-banner.jpg

Sorry for my stupid questions, but any help is much appreciated!

[kachkaev]

I just faced the same issue, which only happened in dev mode - the images did show up after build.

Here are the steps that should help getting over it (inspired by https://github.com/webpack/style-loader/pull/96#issuecomment-228370602):

1. Create internals/dev-preamble.js:

   __webpack_public_path__ = window.location.protocol + '//' + window.location.host + '/';
   

2. Open internals/webpack/webpack.dev.babel.js and add one line:

   // Add hot reloading in development
   entry: [
     'eventsource-polyfill', // Necessary for hot reloading with IE
     'webpack-hot-middleware/client',
     path.join(process.cwd(), 'internals/dev-preamble.js'), // <--------------- this one
     path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
   ],
   

Here is what changes when you look at your CSS in Chrome’s inspector:

# source
background: url('./logo.png') no-repeat 0 0;

# dev mode, before hacking
background: url(/8fe95655bf016c50f6c443abf0186652.png) no-repeat 0 0;

# dev mode, after hacking
background: url(http://localhost:3000/8fe95655bf016c50f6c443abf0186652.png) no-repeat 0 0;

Might be worth doing this right in the boilerplate, but I’m not sure if my solution is elegant enough for a PR. Hope others spend less time making this work!

[rizedr]

@mxstbr Has any solution been adopted for this issue? Except @kachkaev’s solution posted above? I am working on a project which has v3.0.0 as dependency.