Estoy usando el componente next/Image para configurar una imagen y agregar estilo usando tailwindcss , me quedé atascado en este punto.
Quería cambiar el src de la imagen para cambiar los conceptos básicos del tamaño de pantalla. Por ejemplo, si estoy en el tamaño de pantalla sm , entonces debería mostrar IMG1 y después del tamaño de pantalla md , debería mostrar IMG2 .
Además, quiero cambiar los attributes of the height y 'ancho del componente siguiente/Imagen' subjetivo a los diferentes tamaños de pantalla.
¿Como lo puedo hacer?
import React from "react"; import imgurl from "../public/dog.jpg"; import imgurl2 from "../public/Ash.jpg"; import Image from "next/image"; const Projects = () => { return ( <> <div className="min-h-full container"> <Image height={400} width={800} className="object-contain rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg " src={imgurl2} alt="" /> </div> </> ); }; export default Projects;Había resuelto el problema con esto,
Poner las dos imágenes en un div wrapper y ocultarlas según el tamaño de la pantalla.
<div className="block sm:hidden"> <Image height={350} width={700} className="object-cover rounded-t-lg " src={imgurl2} alt="" /> </div> <div className="hidden sm:block"> <Image width="500%" height="1000%" className="object-cover rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg" src={imgurl3} alt="" /> </div>