search

zouhir / lqip-loader

Low Quality Image Placeholders (LQIP) for Webpack
1.21k stars 44 forks source link

How to use lqip-loader and css-loader at the same time? #18

Open UwUnyaa opened 5 years ago

UwUnyaa commented 5 years ago

I've set up lqip-loader in a project I'm working on to add lazy loading of images with LQIP with content imported via Webpack. After making changes to my React components which happen to use these images, they work correctly.

My problem is that references to images in (s)css (for instance, url() in background-image end up getting mangled into [object Object] which makes sense considering how Webpack works, but it's obviously a huge problem. Right now I'm considering writing a loader that looks whether the previous loader returned an Object that looks like something from this loader, and gets the src property of it to get the URL.

I've tried looking for solutions to the problem of this kind, but I haven't managed to find anything. I think this is a big issue (and it makes this loader unusable to quite a lot of people). Shouldn't there be some information about this in the readme with a possible workaround (maybe something like what I've mentioned abve, I haven't tried it yet myself)?

UwUnyaa commented 5 years ago

A quick workaround is to use webpack loader imports, in this case they will end up looking like this: lqip-loader!./path/to/my/image. Some configurations might require disabling lint rules to permit use of webpack loader import syntax.