Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support static next/image out of the box #177

Merged
merged 5 commits into from
Jul 3, 2021
Merged

Support static next/image out of the box #177

merged 5 commits into from
Jul 3, 2021

Conversation

shuding
Copy link
Owner

@shuding shuding commented Jun 23, 2021

This PR introduces a new option to the Nextra core unstable_staticImage: boolean, disabled by default, which transpiles the image node into the next/image component, only if the image url is a relative path (begins with ./ or ../).

For example:

![Logo](../../public/img.jpeg)

with Nextra, is equivalent to

import Image from 'next/image'
import img from '../../public/img.jpeg'

<Image src={img} alt="Logo" placeholder='blur'>

in MDX.

Notes

  • It currently only supports "importable static images" (with a relative path) because you don't need to specify width & height, which is very convenient for writing Markdowns.
  • It pre-configures options like layout and placeholder for you, since Nextra is opinionated and wants to support the most common cases with the best UX. To customize it, simply import next/image in MDX.
  • Closes Improve img #104.

@vercel
Copy link

vercel bot commented Jun 23, 2021

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

nextra – ./

🔍 Inspect: https://vercel.com/shuding/nextra/5rqhW6A3oirmuj2aLuMnYReLfQH3
✅ Preview: Canceled

[Deployment for 9d84d33 canceled]

nextra-dev – ./examples/docs

🔍 Inspect: https://vercel.com/shuding/nextra-dev/GPrbvteurwh1B9KMf5S8MQ5eXySi
✅ Preview: https://nextra-dev-git-static-image-shuding1.vercel.app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant