Image URL doesn’t resolve

[brandondurham]

This may very well be an issue with my setup outside of the url-loader… not sure.

Here is my url-loader config:

loaders: [
    {
        test: /\.(png|jpg|svg)$/,
        loader: 'url?limit=25000'
    }
]

In my component’s CSS file I have the following declaration:

.Base {
    background-color: rgb(83, 96, 108);
    background-image: url('./images/fonts-wallpaper_2x.png');
    background-size: 1760px 248px;
}

The url-loader does the proper thing and moves that image to my publicPath and updates the url for the image in the resulting CSS:

.CTA-001__Base-39mzM {
    background-color: rgb(83, 96, 108);
    background-image: url(/include/images/1eb425455da53643003af01f01e8231f.png);
    background-size: 1760px 248px;
}

Problem is the image never actually appears in the browser. When I right-click the image URL in the inspector and choose “Open link in new tab” it sends me to this URL:

chrome-devtools://devtools/include/images/1eb425455da53643003af01f01e8231f.png

If I actually type in the url http://my.local.site/include/images/1eb425455da53643003af01f01e8231f.png the image appears.

Any idea what the problem might be?

[wmadden]

FWIW I had to debug the same problem and I posted my findings on StackOverflow: http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809

Chrome has problems with paths that don't specify the protocol

[luqin]

The same problem +1

[brandonaaskov]

Though I was trying to get base64 strings to render properly (and couldn't), this at least led me to the absolute URL solution. I don't love it, but it's literally the only thing I've gotten to work, so thank you @wmadden.

[EugeneHlushko]

Try removing sourceMap param from css loader @luqin

[aototo]

@EugeneHlushko Thank you!

[michael-ciniawsky]

@brandondurham You still experience this regression ?

[brandondurham]

All good here! Removing sourceMaps did the trick.

[bengrunfeld]

@EugeneHlushko can you please show code, or give explanation of how to remove the sourceMap param from the CSS (or SASS) loader?

e.g. if these are your loaders in webpack.config.js, where would you change the code?

{
  test: /\.(png|jpg)$/,
  loader: 'url-loader?limit=20000'
},
{
  test: /\.scss$/,
  loader: 'style-loader!css-loader!sass-loader'
}

[michael-ciniawsky]

@bengrunfeld With the webpack.config.js you posted sourceMap should be off already, what is your particular issue ? Please provide more info about your setup (webpack version, loader versions, webpack.config.js) and logs (stacktrace) etc.

[bengrunfeld]

@michael-ciniawsky Here is a link to a repo with an example of the bug. link

Clone, npm install and run webpack and if you open index.html in Chrome, you will see the following error in the developer console: Failed to load resource: net::ERR_FILE_NOT_FOUND, but if you inspect the offending element <div class="lisa"></div> you will see that a direct URL has been created for this resource, although it does not resolve to an actual image.

Again, maybe this is a usage error, but hard to tell from my perspective since I am receiving no Webpack errors.

[michael-ciniawsky]

@bengrunfeld I will test it and take a deeper look soon 😛 things a saw at first glance are

.babelrc

- ['env', 'es2015', 'react']
+ ['env', 'react']

babel-preset-env 'includes' babel-preset-es2015 already you applying it twice atm, check the README :)

For the URL issue, since you're are using sass-loader you may need resolve-url-loader, but as I said I will come back here later 🙃

[delebash]

Any update on this? I don't have source-maps enabled. The one difference from the OP's is that my css is inside "<style>" tags instead of a separate css file