0
634
VistasEl componente de imagen Next.js Tailwind-css no funciona
Recientemente, he estado tratando de convertir un proyecto de reacción al siguiente y cómo tengo que usar el componente siguiente/Imagen que está un poco roto
<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>; por alguna razon esto me da esto 
donde por alguna razón la imagen tiene un pequeño relleno entre el borde
Lo he comprobado y no hay ningún borde, esto es solo el componente de imagen de nextjs roto. Por favor, sea de ayuda. Probé estas soluciones y ninguna de ellas funcionó: La siguiente imagen no toma propiedades de clase Cómo usar Tailwind CSS con la imagen Next.js
Gracias :)
1 Respuestas
Responde la pregunta0
Esta es mi propuesta de solución, con pequeñas mejoras. Espero que esté satisfecho ;-) La clave del ejemplo es el uso de layout="responsive" (en el componente de imagen next.js ) y la clase personalizada tailwindcss min-width en el div principal.
ejemplo.js (Página de ejemplo)
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 He agregado un min-width personalizado para obtener más información aquí .
module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], theme: { minWidth: { "1/5": "20%" }, extend: {}, }, plugins: [], };Salida : imagen sin relleno adicional " entre el borde "
Para servir mi imagen, tuve que agregarla a mi archivo next.config.js .
module.exports = { reactStrictMode: true, images: { domains: ["images.unsplash.com"], }, };Probado con: "siguiente": "12.0.7", "reaccionar": "17.0.2", "tailwindcss": "^3.0.5"