Skip to content

Latest commit

 

History

History
33 lines (21 loc) · 975 Bytes

image.mdx

File metadata and controls

33 lines (21 loc) · 975 Bytes
Raw

Next.js Image

You can use Next.js Image directly in MDX.

If the demo.png file is located at /public/demo.png, you can use the code below to display it:

import Image from 'next/image'

<Image src="/demo.png" alt="Hello" width={500} height={500} />

Static Image

import Callout from 'nextra-theme-docs/callout'

You need to opt-in to this feature by enabling [`unstable_staticImage: true`](/get-started#create-manually).

Nextra also supports automatic static image imports, you no longer need to specify the width and height of the image manually, and you can directly use the Markdown syntax to display the same image:

![Hello](../../../public/demo.png)

With Next.js Image, there will be no layout shift, and a beautiful blury placeholder will be shown by default when loading the images:


Nextra