如何在Next.js中移除图片的额外背景方块内容？

• 明确Image组件的布局与尺寸
  Next.js的Image组件为优化加载体验，默认会生成占位容器，若未配置正确的尺寸或布局规则，就会出现额外方块：

  • 若使用App Router（Next.js 13+）：给图片的父容器添加relative定位，给Image组件加上fill属性让其填充父容器，配合object-contain/object-cover保证图片自适应，再添加bg-transparent确保背景无填充。
  • 若使用Pages Router：给Image组件设置实际的width和height，同时添加layout="responsive"属性，让图片根据容器宽度自适应缩放。

• 修改后的代码示例（App Router版本）

<div className="flex flex-col items-start justify-start rounded-3xl p-4 bg-boxi w-1/3">
  <div className="mb-4 relative w-1/2">
    <Image
      src={ProfilePic}
      alt="个人头像"
      fill
      className="object-contain hover:drop-shadow-image bg-transparent"
    />
  </div>
  <div className="w-full flex flex-col items-start">
    <p className="text-lg font-semibold text-light mb-1">------</p>
    <p className="text-base font-medium text-light mb-1">-------</p>
    <p className="text-sm font-medium text-light">example@gmail.com</p>
  </div>
</div>

• 关键注意点
  • 不要留空alt属性，添加有意义的替代文本，既符合无障碍规范，也能避免部分浏览器的默认样式异常。
  • 检查父容器是否存在额外的padding、border或背景样式，这些也可能被误认为是图片的额外方块。

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