React Lazy Blur Images

Lazy Blur Images is a light component that allows developers to implement an async image charge in their websites when they are in the visible area of the user

You can view a example of this library from here

How Works

Lazy Blur Images works with base64 images to show a light preview while the real image is downloaded in the background, the image will be downloaded after the "load" event if it is in the visible area, by default the Intersection Observer API is used to detect if the image is in the visible area

Placeholder Studio

You can get and manipulate a placeholder from the official (and free) Placeholder Studio for this package

How to implement

We need to get our base64 small image from Placeholder Studio

<LazyBlurImage
  src="https://concepto.de/wp-content/uploads/2015/03/paisaje-e1549600034372.jpg"
  placeholder="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAADCAIAAADUVFKvAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAO0lEQVQImQEwAM//AHmap2iet1OeyIi2ysLS0QCKj4xsiIxujISipHLCsG4AbHN5VWNsXmRwWl9nYmZkbxkX08bVaG0AAAAASUVORK5CYII="
  alt="Some alt text"
  width={800}
  height={409}
  radio={1}
  scale={1.5}
  onComplete={() => {})}
  onError={() => {}}
/>

| property | description | default | | ----------- | ---------------------------------------------------------- | -------- | | src | Image url | Manually | | placeholder | Base64 Placeholder generated by the placeholder studio | Manually | | alt | Alternative text | Manually | | width | Image width | Manually | | height | Image Height | Manually | | scale | Custom css transform: scale() used to show the placeholder | 1.5 | | radio | Custom css filter: blur() radio in pixels | 20 | | onComplete | Callback called when the image is downloaded | Manually | | onError | Callback called when the image can't be downloaded | Manually |