NextJS automatically replace <img/> tag to <Image/> Component-CodePudding

i have the Problem, that i fetch HTML (and md) from a headless CMS (Directus). The Problem is that the Images are not optimized. How can i automatically replace all fetched tags with Next`s Image-Component?

This is how i fetch the Html Code:

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

This is how i fetch MD:

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

CodePudding user response：

Usually code editors have such functionality. Find out for yourself in the editor how you can do this

CodePudding user response：

If I understood your question properly, you are saying your tags are automatically getting converted to next/Image component ?

If that's the case all you need to do is add domain names from of IMG src url to next config file you can read more about it here: https://nextjs.org/docs/basic-features/image-optimization#domains