Awesome

lqip.macro

Webpack lqip-loader implemented as babel-plugin-macros

Usage

Similar to nodejs require call:

import lqip from "lqip.macro";

const preview = lqip("./image.jpg");

Example of usage in create-react-app

import coverImage from "./cover-image.jpg";
import lqip from "lqip.macro";
const coverLqip = lqip("./cover-image.jpg");

const SomeComponent = () => (
  <div
    style={{
      backgroundImage: `url(${coverLqip}`,
      backgroundSize: "cover",
      backgroundRepeat: "no-repeat"
    }}>
    <img src={coverImage} alt="" width="100%" height="100%"/>
  </div>
);

Credits

Based on pveyes/raw.macro.

License

MIT