- Declare default
name
,context
,quality
, andbackground
through webpack options when they're not specified in the loader query (#12).
- Add linting (#7)
- Breaking (maybe): Require node >= v4
- Fix wrong callback being called on file load error (#6)
- Added tests!
- Update
queue-async
tod3-queue
- Optimization: skip resizing images of the same size (#5)
Using the size
option for getting only one resized image no longer just returns a string but the same object structure as when using sizes
. The difference is, that when toString()
is called on that object, it will return the path of the first resized image.
Also, for pure convenience, the returned object also contains a src
property, so it can be spread onto a React component (e.g. <img {...resized} />
).
This worked:
import resized from 'responsive?sizes[]=100,sizes[]=200';
<img srcSet={resized.srcSet} src={resized.images[0].path} />
.foo { background-image: url('responsive?size=100'); }
But this didn't 😭:
import resized from 'responsive?size=100';
// Whoops, error because `resized` ist just a string
<img srcSet={resized.srcSet} src={resized.images[0].path} />
/* Whoops, `url('[object Object]')` */
.foo { background-image: url('responsive?sizes[]=100'); }
All these work ✌️
import resized from 'responsive?sizes[]=100,sizes[]=200';
<img srcSet={resized.srcSet} src={resized.src} />
<img srcSet={resized.srcSet} src={resized} />
<img {...resized} />
.foo { background-image: url('responsive?sizes[]=100,sizes[]=200'); }
.foo { background-image: url('responsive?sizes[]=100'); }
.foo { background-image: url('responsive?size=100'); }