Next.js 画像
MDX 内で Next.js 画像 を使用する標準的な方法は、コンポーネントを直接インポートすることです
MDX
import Image from 'next/image'
<Image src="/demo.png" alt="Hello" width={500} height={500} />静的画像
💡
この機能は、Nextra の設定で staticImage: true が有効になっている状態で、デフォルトで有効になっています。
Nextra は、マークダウン構文で静的画像のインポートを自動的に最適化します。画像の幅と高さを指定する必要はなく、![]() マークダウン構文を使用するだけです
マークダウン
これにより public フォルダー内の demo.png ファイルが読み込まれ、Next.js <Image> で自動的にラップされます。
 を使用して、public でホストしたくない場合に、相対パスから画像を読み込むこともできます。
Next.js Image を使用すると、レイアウトのずれがなく、画像を読み込むときに美しいぼやけたプレースホルダーがデフォルトで表示されます
