Next.js Image

The standard way to use Next.js Image inside MDX is to directly import the component:

MDX


import Image from 'next/image'
 
<Image src="/demo.png" alt="Hello" width={500} height={500} />

Static Image

Note

This feature is enabled via staticImage: true in the Nextra config by default.

Nextra supports automatically optimizing your static image imports with the Markdown syntax. You do not need to specify the width and height of the image, just use the ![]() Markdown syntax:

Markdown


![Hello](/demo.png)

This loads the demo.png file inside the public folder, and automatically wraps it with Next.js <Image>.

💡

Tip

You can also use ![](../public/demo.png) to load the image from a relative path, if you don’t want to host it via public.

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

Nextra

Image Zoom

Note

The image zoom feature is enabled globally by default.

In the default configuration, if you want to use this feature, simply insert images using ![]() Markdown syntax.

Disable Image Zoom

For nextra-docs-theme and nextra-blog-theme, you can disable image zoom by replacing the img component used in MDX.

theme.config.jsx


import { Image } from 'nextra/components'
 
export default {
  // ... your other configurations
  components: {
    img: props => <Image {...props} />
  }
}

Enable/Disable Image Zoom for Specific Images

When zoom is disabled globally, but you want to enable it for specific images, you can do so by using the <ImageZoom> component:


import { ImageZoom } from 'nextra/components'
 
<ImageZoom src="/demo.png" />

When zoom is enabled globally, and you want to disable zoom for a specific image, you can simply use the <Image> component:


import { Image } from 'nextra/components'
 
<Image src="/demo.png" />