使用备注为带有 Markdown 的图像添加尺寸属性

Question

我有一个用 Nextjs 制作的博客，它在使用 remark lib 的帖子中使用 markdown

问题出在灯塔审核中要求提供图像中的尺寸属性

有没有办法在remark生成的html标签中添加宽度高度属性？

我已经在 StackOverflow 上检查了所有可能的问题，但没有一个回答我的请求，请不要建议其他主题

Answer 1

我不确定这可以在备注中完成，但我已经在

ReactMarkdown

中完成了。

这个博客解释得很好：

https://amirardalan.com/blog/use-next-image-with-react-markdown#add-custom-metastring-logic

博客中的这个示例解析图像中的数据并将其作为参数添加到 ReactMarkdown。

所以你会说类似

![some alt text {200x100}](/my/image.png)

然后您就可以读取替代文本并将其添加到图像元素中。

imgCustom => {
  const { node } = paragraph

  if (node.children[0].tagName === "img") {

    const width = metaWidth ? metaWidth[1] : "768"
    const height = metaHeight ? metaHeight[1] : "432"

    return (
        <Image
          src={image.properties.src}
            width={width}
            height={height}
          />
    )
  }
},

<ReactMarkdown components={{ img: imgCustom }}>{markdown}</ReactMarkdown>