如何防止NextJS Image组件自动拉伸变形

Next.js Image组件默认以响应式为核心设计，若未指定合理的布局策略，容易出现宽高异常拉伸的情况。以下是无需手动设置固定尺寸或使用fill属性的解决方案：

• Pages Router（Next.js 12及更早）：使用layout="intrinsic"
  该布局模式会让图片保留自身宽高比，同时最大宽度不超出容器范围，行为和原生<img>一致：

  import Image from 'next/image';
  
  function MyComponent() {
    return (
      <Image
        src="/public/your-image.jpg"
        alt="图片描述"
        layout="intrinsic"
      />
    );
  }
  

• App Router（Next.js 13+）：通过内联样式重置宽高
  新版本移除了layout属性，可通过设置width={0}、height={0}绕过强制尺寸校验，再用样式让图片自适应：

  import Image from 'next/image';
  
  function MyComponent() {
    return (
      <Image
        src="/your-image.jpg"
        alt="图片描述"
        width={0}
        height={0}
        style={{ width: 'auto', height: 'auto' }}
      />
    );
  }
  

• 关闭图片优化（适合无需优化的场景）
  添加unoptimized属性后，Image组件会退化为类似原生<img>的行为，直接使用图片自身尺寸：

  import Image from 'next/image';
  
  function MyComponent() {
    return (
      <Image
        src="https://external-domain.com/your-image.jpg"
        alt="图片描述"
        unoptimized
      />
    );
  }
  

  注意：此方式会关闭Next.js的图片格式转换、懒加载等优化能力，本地图片不建议使用。

• 外部图片需配置remotePatterns
  若使用外部域名的图片，必须在next.config.js中配置remotePatterns，否则Next.js无法获取原图尺寸导致异常：

  // next.config.js
  const nextConfig = {
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'external-domain.com',
          pathname: '/**',
        },
      ],
    },
  };
  
  module.exports = nextConfig;
  

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