Next.js Image组件layout="fill"属性使用异常求助

问题根源 #

你混淆了新版Next.js Image组件（13+）与旧版legacy Image的属性用法，且缺少外部图片域名配置，导致图片无法正常缩放加载。

具体修复步骤 #

• 移除不必要的legacy导入：删除import { layout } from 'next/legacy/image';，新版Image组件无需此导入。
• 确保父容器宽高约束：你的父div已有relative，但需补充明确宽度（如w-10），否则fill属性无法确定填充范围。
• 配置外部图片域名：Next.js Image组件默认限制外部图片来源，需在next.config.js中添加允许的域名。
• 用组件原生属性控制缩放：优先使用Image组件的objectFit属性替代Tailwind类，适配性更可靠。

修正后的完整代码 #

组件代码

import React from "react";
import Image from "next/image";

function Header() {
  return (
    <header>
      {/* left */}
      <div className="relative flex items-center h-10 w-10 cursor-pointer m-auto">
        <Image
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Airbnb_Logo_B%C3%A9lo.svg/2560px-Airbnb_Logo_B%C3%A9lo.svg.png"
          alt="main_logo"
          fill
          objectFit="contain"
        />
      </div>

      {/* middle */}
      <div></div>

      {/* right */}
      <div></div>
    </header>
  );
}

export default Header;

next.config.js配置

module.exports = {
  images: {
    domains: ['upload.wikimedia.org'], // 添加外部图片域名
  },
};

额外说明 #

• 若使用Next.js 12及以下版本，需确保已启用新版Image组件（默认已启用）。
• 首屏图片可添加priority属性，提升加载优先级。

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