Next.js Image组件srcSet不生效，始终加载src指定图片求助

你的代码存在两个核心问题，导致srcSet未按预期触发：

1. sizes属性逻辑与原需求不匹配 #

原代码逻辑是视口≥740px时加载横图，否则加载竖图，但你设置的sizes规则为：

"(max-width: 739px) 100vw, 740px"

这条规则表示视口≤739px时图片占满屏幕，≥740px时图片固定显示740px宽，浏览器会据此匹配srcSet中最接近740px的资源（也就是竖图），自然不会触发横图加载。

2. srcSet的宽度标识与实际场景不匹配 #

你给横图标注2560w、竖图标注740w，但浏览器是根据sizes计算出的图片显示宽度，去匹配srcSet中最接近的资源。如果大屏下图片实际是占满屏幕宽度，2560w的资源只会在超宽屏场景才会被选中，和你的预期不符。

两种可行的修复方案 #

方案一：保留picture标签嵌套Next.js Image（推荐，逻辑与原代码完全一致）

Next.js允许将Image组件放在picture标签中，直接复用原有的媒体查询逻辑，避免srcSet配置错误：

<picture>
  <source media="(min-width:740px)" srcSet={block.imageLandscape.url} />
  <Image
    src={block.imagePortrait.url}
    alt={block.imagePortrait.title}
    fill
    className={basic.imgFluid}
    objectFit="cover" // 根据需求调整，保持图片比例
  />
</picture>

注意：这里使用fill属性替代固定width/height，让Image自适应父容器，配合className控制样式。

方案二：修正sizes和srcSet的配置

如果一定要单独使用Image组件，需调整sizes和srcSet逻辑以匹配原需求：

<Image
  src={block.imagePortrait.url}
  alt={block.imagePortrait.title}
  width={block.imageLandscape.width} // 以横图原始宽度为基准
  height={block.imageLandscape.height}
  sizes="(min-width:740px) 100vw, 100vw" // 所有断点下图片占满屏幕宽度
  srcSet={`BB
    ${记录块之一强�系统微<h圆的半径及周长的计算方法
    ${block.imageLandscape.url} ${block.imageLandscape.width}w,
    ${block.imagePortrait.url} ${block.imagePortrait.width}w
  `}
  className={basic.imgFluid}
/>

关键要点：

• sizes明确告知浏览器所有断点下图片的显示宽度，确保浏览器能正确匹配srcSet资源。
• srcSet中使用图片的实际原始宽度作为w标识，而非硬编码数值。

另外需确认：

• Next.js版本支持自定义srcSet配置（13+的App Router或Pages Router均支持）
• 外部图片域名已在next.config.js的images.domains中配置

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