Nextjs 图像组件和设置宽度和高度 CSS

Question

我正在使用 Next.js 附带的图像组件，但它迫使我将宽度和高度设置为值。我正在使用 Tailwind CSS 并使用他们的实用程序类来设置高度和宽度。

<Image
      src={imageSrc}
      alt={name}
      className="object-cover object-center"
      layout="fill"
/>

有效的HTMLCss代码是

<img
    className="w-auto h-6 lg:block"
    src="/img/logo-dark.png"
    alt="nftHODL.club Logo"
/>

Answer 1

添加具有大小和 relative 类的包装器 div，然后在图像组件上设置 layout="fill" 应该可以解决问题。

示例：

<div className="h-64 w-96 relative"> // "relative" is required; adjust sizes to your liking
  <Image
    src={img.img}
    alt="Picture of the author"
    layout="fill" // required
    objectFit="cover" // change to suit your needs
    className="rounded-full" // just an example
  />
</div>

来源：https://techinplanet.com/how-to-use-tailwind-css-with-next-js-image/

Nextjs 图像组件和设置宽度和高度 CSS

Nextjs Image component and setting width and height with CSS

html

css

image

next.js

tailwind-css