切换HTML img为Next.js Image时图片底部出现间隙的原因

这个底部间隙不是Next.js Image组件的独有bug，本质是浏览器默认渲染规则导致的：

• 浏览器默认将img标签识别为行内替换元素，行内元素的默认垂直对齐规则是baseline（基线对齐）
• 基线对齐逻辑下，浏览器会在元素底部预留一小段空白，用来容纳p、g、y这类字母低于文字基线的下沉部分，这段预留空白就是肉眼可见的多余间隙
• 原生普通<img>标签本身也存在这个间隙，替换为Next.js Image组件后，组件内部渲染的img标签仍保留了默认的行内元素属性，因此间隙会直接显现。

优先使用前两种方案，无副作用、全浏览器兼容性最好：

• 方案1：将图片设置为块级元素，彻底脱离行内流渲染规则
  如果你使用Tailwind CSS，直接给Image组件加block类名即可：

  <Image
    src="https://ticket-t01.s3.eu-central-1.amazonaws.com/b29418ef-156d-43d7-872e-5d180cd1feb0"
    alt=""
    width={338}
    height={226}
    className="block"
  />
  

  如果写原生CSS，可以给组件加自定义类，设置样式display: block;，或者直接加内联样式style={{display: 'block'}}。
• 方案2：修改图片的垂直对齐方式，脱离基线对齐规则
  给Image组件设置垂直对齐属性为非baseline的值即可，middle/top/bottom都可以消除间隙，Tailwind下直接加align-middle类：

  <Image
    src="https://ticket-t01.s3.eu-central-1.amazonaws.com/b29418ef-156d-43d7-872e-5d180cd1feb0"
    alt=""
    width={338}
    height={226}
    className="align-middle"
  />
  

  原生CSS对应样式为vertical-align: middle;。
• 方案3：给图片父容器设置font-size: 0
  基线预留的间隙是为文本展示服务的，父容器字号设为0后这部分空间会自动消失，但如果父容器内存在其他文本内容，需要单独给文本元素重新设置字号，否则文本会因继承字号0无法显示，该方案仅适合容器内只有图片的场景，不推荐全局使用。

注意：不要通过加负margin、强行写死高度覆盖的方式消除间隙，这类方案属于硬适配，不同浏览器、不同字体渲染规则下可能出现错位问题。

内容的提问来源于stack exchange，提问作者János