将Next.js中的图像组件与Tail Windcss类一起使用时,图像无响应

pdsfdshx  于 2022-10-01  发布在  其他
关注(0)|答案(1)|浏览(195)

我想让我的形象在手机上得到响应。我已经设置了图像类的类,当我只使用reactjs或常规的img标签时,它就会起作用。我想让this image响应。我一直试图用“响应”来设置图像的布局属性,但是图像消失了。我一直试着用“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>

我找到了图片应该 Package 在您的响应代码中的方法。不要将响应的类名称直接放在Nextjs Image组件上。

这是代码解决了我的问题。

<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>
vyswwuz2

vyswwuz21#

我找到了图片应该 Package 在您的响应代码中的方法。不要将响应的类名称直接放在Nextjs Image组件上。

这是解决问题的代码。

<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>

相关问题