srcset-loader icon indicating copy to clipboard operation
srcset-loader copied to clipboard

How to use?

Open goowikns opened this issue 8 years ago • 2 comments

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?

goowikns avatar Dec 03 '17 09:12 goowikns

Awaiting feedback

goowikns avatar Dec 14 '17 14:12 goowikns

Awaiting still

goowikns avatar Jan 04 '18 14:01 goowikns