Next.js 图像组件 Tailwind-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 Image not taking class properties How to use Tailwind CSS with Next.js Image

谢谢 :)

Answer 1

这是我的解决方案建议，有一些小的改进。我希望你会满意 ;-) 示例的关键是使用layout="responsive"（在next.js 图像组件）和自定义min-width tailwindcss 类父 div。

example.js（示例页面）

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 更多关于它here。

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"],
  },
};

---

测试：“next”：“12.0.7”，“react”：“17.0.2”，“tailwindcss”：“^3.0.5”