Next.js Image组件srcSet不生效，如何为移动端加载不同图片？

方案1：使用Next.js Image组件原生的srcSet与sizes属性 #

Next.js的Image组件支持标准的srcSet字符串格式，你可以通过它指定不同宽度的图片，配合sizes属性告诉浏览器在不同视口下应该加载哪张图，替代你期望的对象式写法：

<Image
  src="/path/to/image-small.jpg" // 兜底图片，当其他条件不匹配时加载
  srcSet="/path/to/image-small.jpg 320w,
          /path/to/image-medium.jpg 640w,
          /path/to/image-large.jpg 1024w"
  sizes="(max-width: 320px) 320px,
         (max-width: 640px) 640px,
         1024px"
  fill={true}
  alt=""
  className="rounded-[10px]"
/>

• srcSet：每个条目由图片路径 + 宽度标识（w单位）组成，浏览器会根据当前视口和图片显示尺寸自动选择最优图片
• sizes：定义不同媒体条件下图片的显示宽度，帮助浏览器更精准地判断加载哪张图

方案2：使用<picture>标签实现精准媒体查询控制 #

如果需要更细粒度的视口匹配（比如针对特定断点加载指定图片），可以用原生<picture>标签包裹Next.js Image组件，这种方式完全符合你按视口切换图片的需求：

<div style={{ position: 'relative' }}> {/* fill属性需要父元素为相对定位 */}
  <picture>
    {/* 移动端（≤320px）加载小图 */}
    <source media="(max-width: 320px)" srcSet="/path/to/image-small.jpg" />
    {/* 平板端（≤640px）加载中图 */}
    <source media="(max-width: 640px)" srcSet="/path/to/image-medium.jpg" />
    {/* 桌面端（>640px）加载大图 */}
    <source media="(min-width: 641px)" srcSet="/path/to/image-large.jpg" />
    {/* 兜底图片，确保所有场景都有图片加载 */}
    <Image
      src="/path/to/image-small.jpg"
      fill={true}
      alt=""
      className="rounded-[10px]"
    />
  </picture>
</div>

关键注意事项 #

• 若图片放在项目public目录下，路径直接写相对路径即可；如果是远程图片，需要在next.config.js中配置images.domains白名单
• 使用fill属性时，父容器必须设置position: relative，否则图片会脱离正常文档流
• 两种方案都能享受Next.js Image组件的自动优化（比如格式转换、懒加载、CDN加速等），比纯CSS display切换的性能更好

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