Skip to content

Latest commit

 

History

History
73 lines (56 loc) · 1.51 KB

README.md

File metadata and controls

73 lines (56 loc) · 1.51 KB
Raw

@allenlee/rehype-image-process

A rehype plugin for processing image nodes to add blur effect and width/height in compile time

For now, Some properties are specific to nextjs

The idea behind this plugin: https://ironeko.com/posts/how-to-blurred-images-on-load-in-next-js

Installation

npm install @allenlee/rehype-image-process

Options

  • srcAsAlt
    If there no alt exists, insert the transformed src to the alt
    default: true
  • blurDataURLPropertyName
    The property name of the generated blur image base64 data
    default: blurDataURL
  • placeholderPropertyName
    The property name of the placeholder (for nextjs only)
    default: blur
  • srcTransform(src per image)
    Convert src of image before it is inserted to any framework
    default: (src) => src

Usage

Source

const rehypeImageProcess = require('@allenlee/rehype-image-process');

rehype().use(rehypeImageProcess).process(`
![some alt](/cat.jpg)

dog.jpg
`);

Yields

<img
  src="/cat.jpg"
  alt="some alt"
  width="500"
  height="500"
  sizes="(max-width: 500px) 100vw, 500px"
  blurDataURL="catblurbase64"
  placeholder="blur"
/>

<!-- if you have some plugin can transform the image directly -->
<img
  src="/dog.jpg"
  alt="/dog.jpg"
  width="200"
  height="300"
  sizes="(max-width: 200px) 100vw, 300px"
  blurDataURL="dogblurbase64"
  placeholder="blur"
/>

License

MIT @ Allen Lee