如何根据屏幕尺寸切换Next.js的Next/Image组件图片？

方法1：用Next.js Image组件的srcSet属性 #

Next.js的Image组件原生支持响应式加载，你可以通过srcSet指定不同屏幕对应的图片，再配合sizes属性告诉浏览器何时加载哪张图，完全满足大屏/小屏的适配需求。

示例代码：

import Image from 'next/image';

export default function Hero() {
  return (
    <div className="hero">
      <Image
        alt="Hero banner"
        // 默认加载的大屏基础图
        src="/hero-desktop.jpg"
        // 定义不同宽度对应的图片：小屏/平板/大屏
        srcSet="/hero-mobile.jpg 640w, /hero-tablet.jpg 1024w, /hero-desktop.jpg 1920w"
        // 指定不同屏幕宽度下的图片显示规则
        sizes="(max-width: 640px) 640px, (max-width: 1024px) 1024px, 1920px"
        width={1920}
        height={800}
        className="w-full h-auto"
      />
    </div>
  );
}

srcSet里的640w代表这张图的实际宽度是640px，浏览器会自动根据当前屏幕宽度和设备像素比挑选最合适的图片加载；sizes则是告诉浏览器不同断点下图片的显示宽度，帮它提前做出加载决策，避免加载不必要的大尺寸图。

方法2：用HTML <picture>元素搭配Next.js Image #

如果需要更精细的控制——比如小屏展示竖屏图、大屏展示宽幅横屏图（完全不同比例的图），可以用<picture>元素包裹Next.js Image，通过media属性指定断点规则。

示例代码：

import Image from 'next/image';

export default function Hero() {
  return (
    <div className="hero">
      <picture>
        {/* 宽度≤640px的小屏设备，加载竖屏图 */}
        <source
          media="(max-width: 640px)"
          srcSet="/hero-mobile-portrait.jpg"
          width={640}
          height={960}
        />
        {/* 宽度≤1024px的平板设备，加载适配图 */}
        <source
          media="(max-width: 1024px)"
          srcSet="/hero-tablet.jpg"
          width={1024}
          height={576}
        />
        {/* 其他情况默认加载大屏宽幅图 */}
        <Image
          alt="Hero banner"
          src="/hero-desktop.jpg"
          width={1920}
          height={800}
          className="w-full h-auto"
        />
      </picture>
    </div>
  );
}

浏览器会按<source>的顺序匹配，加载第一个符合当前屏幕条件的图片，完美实现不同屏幕展示不同比例的Hero图。

方法3：客户端动态判断屏幕尺寸+条件渲染 #

如果需要更复杂的逻辑（比如结合其他状态判断），可以在客户端通过监听窗口尺寸，动态渲染对应图片。

示例代码：

import { useState, useEffect } from 'react';
import Image from 'next/image';

export default function Hero() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    // 判断当前屏幕是否为小屏
    const checkScreenSize = () => {
      setIsMobile(window.innerWidth <= 640);
    };
    // 初始化时执行一次
    checkScreenSize();
    // 监听窗口大小变化，实时更新状态
    window.addEventListener('resize', checkScreenSize);
    // 组件卸载时移除监听
    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);

  return (
    <div className="hero">
      {isMobile ? (
        <Image
          alt="Mobile hero"
          src="/hero-mobile-portrait.jpg"
          width={640}
          height={960}
          className="w-full h-auto"
        />
      ) : (
        <Image
          alt="Desktop hero"
          src="/hero-desktop.jpg"
          width={1920}
          height={800}
          className="w-full h-auto"
        />
      )}
    </div>
  );
}

注意：这种方法是客户端渲染时判断，首次加载可能会有短暂的切换，建议配合骨架屏优化用户体验。

内容的提问来源于stack exchange，提问作者Aghilesdza