NextJS 13.0.0中next/image结合TailwindCSS的图片响应式问题解决

我需要让图片在移动端实现响应式布局，使用React原生img标签时，直接添加Tailwind CSS响应式类就能正常生效，但切换到Next.js的Image组件时出现了问题：设置layout="responsive"后图片直接消失，设置layout="fill"则图片会过大铺满整个屏幕。

原问题代码 #

<div className="flex justify-center lg:items-end lg:justify-end">
    <Image
      className="pt-[45px] lg:pt-0 w-[219px] h-[222px] ss:w-[271px] ss:h-[276px] sm:w-[379px] sm:h-[382px] lg:w-[421px] lg:h-[426px] z-[1]"
      src={data?.image}
      alt="person_hero"
      width="421"
      height="426"
    />
</div>

解决方案 #

在Next.js v13.0.0版本中，不能直接在next/image组件上添加响应式Tailwind类名，需要将所有响应式样式属性迁移到包裹Image组件的父级容器上，由父容器控制图片的尺寸和间距。

修正后的代码 #

<div className="flex justify-center lg:items-end lg:justify-end">
    <div className="pt-[45px] lg:pt-0 w-[219px] h-[222px] ss:w-[271px] ss:h-[276px] sm:w-[379px] sm:h-[382px] lg:w-[421px] lg:h-[426px] z-[1]">
      <Image src={data?.image} alt="person_hero" width="421" height="426" />
    </div>
</div>

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