mirror this repo: https://github.com/The-Run-Philosophy-Organization/run.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
974 B
33 lines
974 B
# Next.js Image
|
|
|
|
You can use [Next.js Image](https://nextjs.org/docs/basic-features/image-optimization) directly in MDX.
|
|
|
|
If the `demo.png` file is located at `/public/demo.png`, you can use the code below to display it:
|
|
|
|
```markdown
|
|
import Image from 'next/image'
|
|
|
|
<Image src="/demo.png" alt="Hello" width={500} height={500} />
|
|
```
|
|
|
|
## Static Image
|
|
|
|
import Callout from 'nextra-theme-docs/callout'
|
|
|
|
<Callout emoji="⚠️">
|
|
You need to opt-in to this feature by enabling [`unstable_staticImage:
|
|
true`](/get-started#create-manually).
|
|
</Callout>
|
|
|
|
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:
|
|
|
|
```markdown
|
|
|
|
```
|
|
|
|
With Next.js Image, there will be no layout shift, and a beautiful blury placeholder will be shown by default when loading the images:
|
|
|
|
<br />
|
|
|
|
|
|
|