カートに入れました

mdxファイルの画像がうまく表示されなかった[Nextjs]

next-mdx-remoteを使ってmarkdownを表示するとき

<div style="width: 100%; margin-left: auto; margin-right: auto">

![mdx-image](1.png)</div>

このようにdivタグで囲むと表示できない

画像のサイズはどうやって調整するのか？

netlify-templates/nextjs-blog-theme のテンプレートを使用している

pages/posts/[slug].jsを編集する

import Image from 'next/image';

...

const components = {
  a: CustomLink,
  Head,
  img: (props) => {
    const match = props.src.match(/#([0-9]*)_([0-9]*)/);
    return (
      <Image src={props.src}
        src={props.src}
        alt={props.alt}
        width={ (match && match[1]) ? `${match[1]}%` : '100'}
        height={ (match && match[2]) ? `${match[2]}%` : '100'}
        layout="responsive"
        objectFit='contain'
      />
    )
  },
};

mdxファイルの中で画像ファイルの名前の後に#幅_高さをつけてやる

![mdx-image](1.png)

↓

![mdx-image](1.png#100_100)

これだとまだファイルのパスがおかしいとおこられる

ルートディレクトリにpublicフォルダを作りその中に1.pngファイルを入れると表示された

![mdx-image](/1.png#100_20)

↓

参考