Rehype plugin to add loading property into <img> tags.
# use yarn
$ yarn add rehype-imgload
# use npm
$ npm install rehype-imgloadAdds loading property to your <img>s.
import rehypeImgLoad from "rehype-imgload";
import rehypeParse from "rehype-parse";
import rehypeStringify from "rehype-stringify";
import { unified } from "unified";
const processor = unified()
.use(rehypeParse)
.use(rehypeImgLoad)
.use(rehypeStringify);
const output = processor.processSync(
'<img src="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/example.jpg"><img src="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/example.jpg" loading="eager">'
);
console.log(output.toString());
// '<img src="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/example.jpg" loading="lazy"><img src="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/example.jpg" loading="eager">'
// Latter `img` is not changed because `overwrite` is `false` by default.
// Pass { overwrite: true } option to overwrite existing loading property.This package exports no identifiers. Default export is rehypeImgLoad.
All options are optional.
boolean. default=false
- If
false, existingloadingproperties will remain unchanged. - If
true, allloadingproperties will be overwritten toloading=options.mode(see below).
"lazy" | "eager", default="lazy"
Indicates how the browser should load the image. MDN Reference
MIT