Как работает компонент изображения в NextJs 13?

Question

Я реализовал пользовательский загрузчик в соответствии с документами: https://nextjs.org/docs/api-reference/next/image .

      import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

Качество не меняется ни на 10, ни на 100. Аналогично реагируют ширина и высота. Кроме того, вот сообщение об исправлении компонента изображения в проекте: как в Next 13 отображать изображения в сетке с одинаковой шириной и высотой, несмотря на разные размеры?Проблема решилась переходом наlegacy.

Answer 1

Это выглядит странно. Это может быть проблема с кешем в приложении или кешем в браузере. Также возможно, что параметры в загрузчике работают некорректно. Если параметр качества не работает, Next js будет считать его качество равным 75.

Вы можете попробовать, добавив приоритет к изображению

      <Image
  loader={myLoader}
  src="me.png"
  alt="Picture of the author"
  width={500}
  height={500}
  priority
/>

Или добавьте неоптимизированный конфиг, обновивnext.config.jsсо следующей конфигурацией:

      module.exports = {
  images: {
    unoptimized: true,
  },
}