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 的图像组件损坏了。请全力以赴我已经尝试了这些解决方案并且 none 这些解决方案有效： Next Image not taking class properties

谢谢:)

Answer 1

这是我的解决方案，稍作改进。我希望您会满意 ;-) 示例的关键是使用 layout="responsive"（在 next.js 图像组件 中）和自定义 min-width tailwindcss class 在父 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”

Next.js 图片组件 Tailwind-css 不工作

Next.js Image component Tailwind-css not working

javascript

reactjs

next.js

tailwind-css

next-images