如何解决Next JS 14 Image组件的宽高比警告问题？

以下是几个简单有效的修复方案：

方案1：使用整数宽高值 #

你当前设置的width={177.35}是小数，Next.js Image组件计算宽高比时可能出现精度误差，引发警告。把宽高改成最接近的整数即可：

<Link href="/">
  <Image src="/logo.svg" width={177} height={30} alt="Logo" />
</Link>

方案2：显式指定宽高比 #

如果需要保留精确的宽高比例，直接通过样式或组件属性指定计算好的比例（177.35/30≈5.9117）：

通用写法 #

<Link href="/">
  <Image 
    src="/logo.svg" 
    width={177.35} 
    height={30} 
    alt="Logo" 
    style={{ aspectRatio: "177.35/30" }}
  />
</Link>

Next.js 13+ App Router写法 #

<Link href="/">
  <Image 
    src="/logo.svg" 
    width={177.35} 
    height={30} 
    alt="Logo" 
    aspectRatio={177.35 / 30}
  />
</Link>

方案3：使用layout="intrinsic"（Next.js 12及更早版本） #

针对旧版Next.js，添加layout="intrinsic"属性可让组件自动按指定宽高比渲染，消除警告：

<Link href="/">
  <Image 
    src="/logo.svg" 
    width={177.35} 
    height={30} 
    alt="Logo" 
    layout="intrinsic"
  />
</Link>

这些方案都能直接解决宽高比计算导致的警告，无需额外复杂样式或Tailwind类。

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