3

所以最近我一直在尝试将一个反应项目转换为下一个，以及我必须如何使用下一个/图像组件，这有点坏了

<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 的图像组件坏了。请全力帮助我已经尝试了这些解决方案，但这些都不起作用： 下一个图像不采用类属性 如何将 Tailwind CSS 与 Next.js 图像一起使用

谢谢 ：）

4

1 回答 1

2

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

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添加了更多关于它的自定义。

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”

于 2022-01-05T19:30:24.353 回答