Next.js自定义Image Loader加载图片尺寸不符合sizes设置问题

我使用Next.js的Image组件自定义了imageLoader，期望实现以下加载逻辑：

• 屏幕宽度<600px时，加载全屏宽度的图片
• 600px≤屏幕宽度<900px时，加载半屏宽度的图片
• 屏幕宽度>900px时，加载300px宽度的图片

但实际测试300px至1500px宽度的屏幕时，始终加载1200px甚至1920px的图片。浏览器检查显示srcset和sizes属性看似正常，请问代码哪里出了问题？

我的代码 #

import Image from "next/image";

function imageLoader({ src, width }) {
  const dir = src.substring(0, src.lastIndexOf("/"));

  if (width <= 320) {
    return `${dir}/320.webp`;
  } else if (width <= 480) {
    return `${dir}/480.webp`;
  } else if (width <= 640) {
    return `${dir}/640.webp`;
  } else if (width <= 750) {
    return `${dir}/750.webp`;
  } else if (width <= 828) {
    return `${dir}/828.webp`;
  } else if (width <= 1080) {
    return `${dir}/1080.webp`;
  } else if (width <= 1300) {
    return `${dir}/1200.webp`;
  } else {
    return `${dir}/1920.webp`;
  }
}

export default function Start({ countries }) {
  return (
    <div>
      <div style={{ width: "300px" }}>
        <Image
          src="/large-image.jpg"
          alt="Large Image"
          loader={imageLoader}
          layout="fill"
          objectFit="cover"
          sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 300px"
        />
      </div>
    </div>
  );
}

/public目录下已存放large-image.jpg及各尺寸对应的<width>.webp图片。

浏览器元素检查结果 #

<img alt="Large Image" src="/1920.webp" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 300px" srcset="/480.webp 384w, /640.webp 640w, /750.webp 750w, /828.webp 828w, /1080.webp 1080w, /1200.webp 1200w, /1920.webp 1920w, /1920.webp 2048w, /1920.webp 3840w">

问题分析 #

1. layout="fill"与父容器的冲突 #

你给Image组件设置了layout="fill"，同时父容器固定了width: 300px。fill布局会让Image完全填充父容器的宽高，此时sizes属性的计算逻辑会基于父容器尺寸，而非屏幕宽度，导致你定义的屏幕宽度规则无法生效。

2. 对loader中width参数的误解 #

自定义loader里的width参数不是屏幕宽度，而是Next.js根据布局、sizes规则**结合设备像素比（DPR）**计算出的图片目标显示宽度。比如在DPR=2的高清屏上，300px的屏幕宽度会让width参数变成600px，你的loader会返回640.webp；如果DPR=4，width会变成1200px，直接返回1200.webp，这就是你看到大尺寸图片被加载的原因。

3. srcset生成异常 #

从检查结果可以看到，srcset里出现了/1920.webp 2048w, /1920.webp 3840w，这是因为Next.js会自动为高DPR设备生成更高分辨率的候选图，但你的loader没有处理这些超出1300px的width值，直接返回了1920.webp，导致大尺寸图被优先选择。

解决方案 #

方案1：调整布局与loader逻辑（推荐） #

修改布局规则，让sizes和父容器的行为匹配，同时调整loader的width判断逻辑：

import Image from "next/image";

function imageLoader({ src, width }) {
  const dir = src.substring(0, src.lastIndexOf("/"));
  // 按目标宽度匹配最接近的图片尺寸
  if (width <= 320) {
    return `${dir}/320.webp`;
  } else if (width <= 480) {
    return `${dir}/480.webp`;
  } else if (width <= 640) {
    return `${dir}/640.webp`;
  } else if (width <= 750) {
    return `${dir}/750.webp`;
  } else if (width <= 828) {
    return `${dir}/828.webp`;
  } else if (width <= 1080) {
    return `${dir}/1080.webp`;
  } else if (width <= 1200) {
    return `${dir}/1200.webp`;
  } else {
    return `${dir}/1920.webp`;
  }
}

export default function Start({ countries }) {
  return (
    <div>
      <div style={{ width: "100%", maxWidth: "300px" }}>
        <Image
          src="/large-image.jpg"
          alt="Large Image"
          loader={imageLoader}
          layout="responsive"
          objectFit="cover"
          width={300}
          height={200} // 替换为你的图片实际宽高比对应的高度
          sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 300px"
        />
      </div>
    </div>
  );
}

方案2：手动基于屏幕宽度加载（不推荐，影响高清屏显示） #

如果想强制基于屏幕宽度加载，忽略设备像素比，可以通过客户端代码获取屏幕宽度，再传递给Image组件：

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

function imageLoader({ src, width }) {
  const dir = src.substring(0, src.lastIndexOf("/"));
  if (width <= 320) {
    return `${dir}/320.webp`;
  } else if (width <= 480) {
    return `${dir}/480.webp`;
  } else if (width <= 600) {
    return `${dir}/640.webp`;
  } else if (width <= 900) {
    return `${dir}/750.webp`;
  } else {
    return `${dir}/320.webp`; // 对应300px宽度的图片
  }
}

export default function Start({ countries }) {
  const [screenWidth, setScreenWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200);

  useEffect(() => {
    const handleResize = () => setScreenWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  let imageWidth;
  if (screenWidth < 600) {
    imageWidth = screenWidth;
  } else if (screenWidth < 900) {
    imageWidth = screenWidth / 2;
  } else {
    imageWidth = 300;
  }

  return (
    <div>
      <div style={{ width: `${imageWidth}px` }}>
        <Image
          src="/large-image.jpg"
          alt="Large Image"
          loader={imageLoader}
          width={imageWidth}
          height={imageWidth * 0.67} // 替换为你的图片宽高比
          objectFit="cover"
        />
      </div>
    </div>
  );
}

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