4

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>
Jose German Perez Sanchez
  • 1,103
  • 4
  • 16
Blizii
  • 173
  • 11
  • I'm having the same issue. It seems that you could get away with using the html syntax tree plugin (called "hast") from the overarching "unified" project (which is where "rehype" is from), see https://github.com/syntax-tree/hast Still, I only want to replace "img" tags with NextJS "Image" tags, and sometimes "a" tags with NextJS "Link" tags. I don't want to have to parse the entire markdown structure for everything else... – noltron000 Jan 23 '23 at 21:32

1 Answers1

-1

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

prograk
  • 559
  • 4
  • 14