Next.js Discord

Discord Forum

Switching src prop for Image component based on viewport width

Unanswered
Violet-green Swallow posted this in #help-forum
Open in Discord
Violet-green SwallowOP
How can I pass to the next/image component two different images so that they switch according to browser width, similar to a media query? I have found success doing this, but I was wondering if there is a more elegant approach:

const [windowWidth, setWindowWidth] = useState(0);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    handleResize();
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);


 <Image src={windowWidth > 768 ? image1 : image2} alt="Illustration" />

1 Reply

Giant ichneumon wasp
Another way to do it is to have two next/image and display them based on media query, instead of switching the src of a single one