Как использовать разные пути до изображений на разных медиа запросах в nextjs?

Question

[Евгений]

В обычном html5 я могу с помощью picture задать несколько source и указать какие изображения отображать на определенном разрешении. В next.js же, я так понял что он автоматом это делает, но как мне на определенном брейкпоинте указать путь до совсем другого изображения с помощью нектовского <Image/> ? Вот вопрос. Кто знает, подскажите плиз :)

Тэги: next.js, next
PS: В тегах не было next.js, поэтому тут написал.

Answer 1

[Ivan Ivanovich]

Нативного решения от next для вашего вопроса на данный момент нет. Самый банальный вариант делать это вручную:

const getSpecificImage = (breakpoint) => {
  switch (breakpoint) {
    case 1200:
      return <Image src="https://google.com?v=1200" />;

    case 600:
      return <Image src="https://google.com?v=600" />;

     default:
      return <Image src="https://google.com?v=default" />;
  }
};

const breakpoint = window?.innerWidth;

const imageElement = getImageSpecificImage(breakpoint);

return (
  <>
    {imageElement}
  </>
);