Изображение не найдено

Избегайте использования элемента <img> из-за медленного LCP и высокого трафика.

Почему произошла эта ошибка

Элемент <img> был использован для отображения изображения вместо <Image /> из next/image.

Возможные способы исправления

Используйте next/image для повышения производительности с автоматической Оптимизацией изображений.

Примечание: При развертывании на управляемом хостинге, помните о проверке цен на поставщика услуг, так как оптимизированные изображения могут оплачиваться иначе, чем исходные.

Цены на общие платформы оптимизации изображений:

• Цены Vercel
• Цены Cloudinary
• Цены imgix

Примечание: При самостоятельном хостинге, помните об установке sharp и проверьте, достаточно ли у вашего сервера памяти для кэширования оптимизированных изображений.

import Image from 'next/image'
 
function Home() {
  return (
    <Image
      src="https://example.com/hero.jpg"
      alt="Landscape picture"
      width={800}
      height={500}
    />
  )
}
 
export default Home

Если вы хотите использовать функции next/image такие как предварительный просмотр размытия, но отключить оптимизацию изображений, вы можете сделать это, используя unoptimized.

Или, используйте элемент <picture> с вложенным элементом <img>:

function Home() {
  return (
    <picture>
      <source srcSet="https://example.com/hero.avif" type="image/avif" />
      <source srcSet="https://example.com/hero.webp" type="image/webp" />
      <img
        src="https://example.com/hero.jpg"
        alt="Landscape picture"
        width={800}
        height={500}
      />
    </picture>
  )
}

Полезные ссылки

• Компонент изображения и оптимизация изображений
• Справочник API next/image
• Самый большой контентный рендеринг (LCP)