How to use different paths to images on different media queries in nextjs?

Question

React

In normal html5, I can pictureuse multiple sources and specify which images to display at a particular resolution. In next.js, I understand that it does this automatically, but how can I indicate the path to a completely different image using Nekt's one on a certain breakpoint ? Here is the question. Who knows, please tell me :) Tags: next.js, next PS: There was no next.js in the tags, so I wrote it here. <Image/>

Answer 1

There is currently no native solution from next for your question. The most banal option is to do it manually:

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}
  </>
);