How to add loading="lazy" to <img>?

[meotimdihia]

How to add loading="lazy" to ?

I am converting markdown to HTML with this code. And now I want to add attribute loading="lazy" to tags. Please show me the code to do it.

export async function parseComment(text: string) {
  const output = await unified()
    .use(remarkParse)
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypeRaw)
    .use(rehypeFormat)
    .use(rehypeStringify)
    .use(rehypeSanitize, {
      tagNames: [
        "br",
        "b",
        "i",
        "strong",
        "em",
        "a",
        "pre",
        "code",
        "img",
        "tt",
        "div",
        "ins",
        "del",
        "sup",
        "sub",
        "p",
        "ol",
        "ul",
        "table",
        "thead",
        "tbody",
        "tfoot",
        "blockquote",
        "dl",
        "dt",
        "dd",
        "kbd",
        "q",
        "samp",
        "var",
        "hr",
        "ruby",
        "rt",
        "rp",
        "li",
        "tr",
        "td",
        "th",
        "s",
        "strike",
        "summary",
        "details",
        "caption",
        "figure",
        "figcaption",
        "abbr",
        "bdo",
        "cite",
        "dfn",
        "mark",
        "small",
        "span",
        "time",
        "wbr"
      ]
    })
    .process(text)
  return String(output)
}

[ChristianMurphy]

Welcome @meotimdihia! 👋
A good place to start is by searching existing plugins: https://github.com/topics/rehype-plugin
Where you will find https://github.com/potato4d/rehype-plugin-image-native-lazy-loading which appears to do exactly what you describe.

If none of the existing plugins meet your needs, you can learn how to write your own from https://unifiedjs.com/learn/

[wooorm]

No you don’t. Use that plugin.

You’re being annoying. Be respectful. Or you’ll be blocked.

If you have question, provide much more info. See the support guide for how to ask questions.

[meotimdihia]

@wooorm I am just saying the truth, the documentation is not really good.

I know I can use the plugin, but I wonder if we can write it directly.
For example, how to add code to existing code in the first post.

I tried to write it like this:

export async function parseComment(text: string) {
  const output = await unified()
    .use(remarkParse)
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypeRaw)
    .use(rehypeFormat)
    .use(rehypeStringify)
    .use(rehypeSanitize, {
      tagNames: [
        "br",
        "b",
        "i",
        "strong",
        "em",
        "a",
        "pre",
        "code",
        "img",
        "tt",
        "div",
        "ins",
        "del",
        "sup",
        "sub",
        "p",
        "ol",
        "ul",
        "table",
        "thead",
        "tbody",
        "tfoot",
        "blockquote",
        "dl",
        "dt",
        "dd",
        "kbd",
        "q",
        "samp",
        "var",
        "hr",
        "ruby",
        "rt",
        "rp",
        "li",
        "tr",
        "td",
        "th",
        "s",
        "strike",
        "summary",
        "details",
        "caption",
        "figure",
        "figcaption",
        "abbr",
        "bdo",
        "cite",
        "dfn",
        "mark",
        "small",
        "span",
        "time",
        "wbr"
      ]
    })
    .use(() => (hast: Root) => {
      visit(
        hast,
        'img',
        (node:  hast.Element) => {
          node.properties = {
            ...(node.properties || {}),
            loading: 'lazy'
          } 
        }
      )
    })
    .process(text)
  return String(output)
}

but it doesn't work.

[wooorm]

Not honest, just rude. You don’t need to be rude to people who do shit for you for free.

Of course you can write it yourself.
And if you’re stuck, that’s fine. You can ask for help. But to get help, you need to provide info. Provide more info.

[ChristianMurphy]

@meotimdihia to reiterate what @wooorm said, please review the support guidelines for how to better frame questions https://github.com/rehypejs/.github

I understand you are frustrated, don't take that out on the people helping you.
Saying "it doesn't work" and "documentation is not really good" provides no useful context, and manages to be rude while also wasting time.

The example in the project readme works as documented.
If you have an issue, take some time to lay out what you are experiencing, the environment you are using, what you've tried, and make it replicatable (ideally with a CodeSandbox or StackBlitz).

---

If you are going to create your own plugin please read https://unifiedjs.com/learn/
In particular https://unifiedjs.com/learn/recipe/tree-traversal/, your code doesn't work because there is no img type node.
It is an element type, with an img tagName https://github.com/syntax-tree/hast#element.
Which is also what the original plugin, which works, checks for https://github.com/potato4d/rehype-plugin-image-native-lazy-loading/blob/013a097512026b269d5ba3ea4df0e9b620185e69/src/index.ts#L8-L10

[meotimdihia]

@ChristianMurphy Thanks, I can do it now:

import visit = require("unist-util-visit")
import type {Root} from 'hast'
import hast from 'hast'

export async function parseComment(text: string) {
  const output = await unified()
    .use(remarkParse)
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypeRaw)
    .use(rehypeFormat)
    .use(rehypeStringify)
    .use(rehypeSanitize, {
      tagNames: [
        "br",
        "b",
        "i",
        "strong",
        "em",
        "a",
        "pre",
        "code",
        "img",
        "tt",
        "div",
        "ins",
        "del",
        "sup",
        "sub",
        "p",
        "ol",
        "ul",
        "table",
        "thead",
        "tbody",
        "tfoot",
        "blockquote",
        "dl",
        "dt",
        "dd",
        "kbd",
        "q",
        "samp",
        "var",
        "hr",
        "ruby",
        "rt",
        "rp",
        "li",
        "tr",
        "td",
        "th",
        "s",
        "strike",
        "summary",
        "details",
        "caption",
        "figure",
        "figcaption",
        "abbr",
        "bdo",
        "cite",
        "dfn",
        "mark",
        "small",
        "span",
        "time",
        "wbr"
      ]
    })
    .use(() => (hast: Root) => {
      visit(
        hast,
        'element',
        (node:  hast.Element) => {
          if (node.tagName !== 'img') {
            return
          }
          node.properties = {
            ...(node.properties || {}),
            loading: 'lazy'
          } 
        }
      )
    })
    .process(text)
  return String(output)
}

I was frustrated because I knew this is not a hard problem. But it is so hard to figure out these lines of code.
There is so a complex ecosystem.
And I am apologizing if my comments sounded rude.

Finally, I think we should add an example like my code. It is more useful to write quickly code than in the documentation: https://unifiedjs.com/learn/recipe/tree-traversal/

[meotimdihia]

Also, Typescript doesn't know it, I don't know if unist-util-visit@2.0.3 is the reason.

[ChristianMurphy]

Upgrade the version of unist-util-visit, it is (at the time of writing) on version 5.0.0 https://github.com/syntax-tree/unist-util-visit/releases/tag/5.0.0 and has significantly more advanced and robust typings than earlier releases.