srcset-loader
srcset-loader copied to clipboard
How to use?
I'm not sure whether I use this right.
So I suppose this plugin creates images depending on the query string you give each image in your html (picture tags)? Or not?
I have the following code:
<picture>
<source srcset="{{ asset('images/header01.jpg?sizes=575w&placeholder=true') }}" media="max-width: 575px">
<source srcset="{{ asset('images/header01.jpg?sizes=768w&placeholder=true') }}" media="max-width: 768px">
<source srcset="{{ asset('images/header01.jpg?sizes=991w&placeholder=true') }}" media="max-width: 991px">
<source srcset="{{ asset('images/header01.jpg?sizes=1199w&placeholder=true') }}" media="max-width: 1199px">
<img srcset="{{ asset('images/header01.jpg') }}" alt="My default image">
</picture>
then in my webpack config (using the Laravel framework) I have following config set:
mix.webpackConfig({
module: {
rules: [{
test: /\.(jpe?g|png|svg|gif)$/,
resourceQuery: /[?&](sizes|placeholder)(=|&|\[|$)/,
use: [
'srcset-loader',
'image-webpack-loader?optimizationLevel=7&interlaced=false',
],
}],
}
});
This code doesn't create any images, it doesn't seem to do anything. Am I using it correctly?
Awaiting feedback
Awaiting still