NextJS 自动将 <img/> 标签替换为 <Image/> 组件答案

【问题标题】：NextJS automatically replace <img/> tag to <Image/> ComponentNextJS 自动将 <img/> 标签替换为 <Image/> 组件
【发布时间】：2022-01-22 20:28:18
【问题描述】：

我有一个问题，我从无头 CMS (Directus) 获取 HTML（和 md）。问题是图像没有优化。如何使用 Next`s Image-Component 自动替换所有获取的标签？

这就是我获取 Html 代码的方式：

<div dangerouslySetInnerHTML={ {__html: data.path} }></div>

这就是我获取 MD 的方式：

<ReactMarkdown rehypePlugins={[rehypeRaw]}>
  {data.path}
</ReactMarkdown>

【问题讨论】：

标签： javascript image next.js nextjs-image

【解决方案1】：

通常代码编辑器都有这样的功能。在编辑器中自己了解如何做到这一点

【讨论】：

【解决方案2】：

如果我正确理解了您的问题，您是说您的标签会自动转换为 next/Image 组件？

如果是这种情况，您只需将 IMG src url 中的域名添加到下一个配置文件，您可以在此处阅读更多信息：https://nextjs.org/docs/basic-features/image-optimization#domains

【讨论】：

不，我希望它们自动转换为 Next Image 标签