Next.js图像组件尾风-css不工作

Question

最近，我一直在尝试将一个react项目转换为next，以及如何使用next/Image组件，该组件有点坏了。

<div className=" flex flex-col items-center p-5 sm:justify-center sm:pt-9 sm:flex-row text-justify relative">
  <div className="border-solid border-2 border-black rounded-full basis-[13%] sm:mr-10">
    <Image
      src={Me}
      alt="Profile"
      width={400}
      height={400}
      className="rounded-full"
      objectFit="cover"
    />
  </div>
  <p className="text-sm sm:basis-2/4 m-4">
    {/* {
            Text goes here, this works fine, this isn't the problem its just part of the parent div :)
          } */}
  </p>
</div>;

因为某种原因这给了我这个

​

由于某种原因，图像在边框之间得到了一个小的填充。

​

​

我检查过了，没有边框，这只是nextjs的图像组件被破坏了。请全力帮助我，我已经尝试过这些解决方案，但都没有奏效：下一个图像不接受类属性 如何在Next.js图像中使用尾风CSS

谢谢:)

Answer 1

这是我的解决方案，有一点改进。我希望您会满意;-)示例的关键是在父div上使用layout="responsive" (在next.js Image component中)和自定义min-width 尾风class类。

example.js (ExamplePage)

import Image from "next/image";

function ExamplePage() {
  return (
    <div className="flex flex-col items-center p-5 sm:justify-center sm:pt-9 sm:flex-row text-justify relative">
      <div className="border-solid border-2 border-black rounded-full basis-[13%] sm:mr-10 min-w-1/5">
        <Image
          src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1172&q=80"
          alt="Profile"
          width={400}
          height={400}
          layout="responsive"
          className="rounded-full"
          objectFit="cover"
        />
      </div>
      <p className="text-xs md:text-xl sm:basis-2/4 m-4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, qui magni
        debitis, omnis quo dolorum nihil labore vel, nisi deserunt
        necessitatibus numquam. Optio ex incidunt quis modi deserunt architecto
        ab neque officiis possimus, doloribus odio vero accusantium, magnam
        dolorum natus? Inventore tempora veritatis eaque nesciunt possimus cum
        porro consequuntur veniam! ab neque officiis possimus, doloribus odio
        vero accusantium, magnam dolorum natus? Inventore tempora veritatis
        eaque nesciunt possimus cum porro consequuntur veniam!
      </p>
    </div>
  );
}

export default ExamplePage;

tailwind.config.js，我添加了自定义min-width，更多关于它的信息，这里。

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    minWidth: { "1/5": "20%" },

    extend: {},
  },
  plugins: [],
};

输出-图像没有任何额外的填充“在边框之间”

​

​

为了服务于我的图像，我必须添加到我的next.config.js文件中。

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ["images.unsplash.com"],
  },
};

用“下一步”："12.0.7“、”反应“："17.0.2”、“尾风”："^3.0.5“进行测试