Next.js изображения
Стандартный способ использовать изображения (Next.js Image (opens in a new tab)) внутри MDX – это непосредственно импортировать компонент:
import Image from 'next/image'
<Image src="/demo.png" alt="Hello" width={500} height={500} />Статические изображения
Эта опция включена по умолчанию. В конфигурационном файле Nextra предустановлено staticImage: true.
Nextra поддерживает автоматическую оптимизацию ваших статических изображений с помощью синтаксиса Markdown. Нет необходимости указывать ширину и высоту изображения, достаточно использовать ![]():
Эта команда загрузит файл demo.png внутрь директории public и автоматически обернет его в компонент Next.js <Image>.
Также вы можете использовать относительный путь к файлу , если не хотите размещать его через public.
С помощью Next.js Image изменения макета страницы не произойдет. При загрузке изображения будет по умолчанию отображен красивый размытый заполнитель.
