I am using the next/Image component to set an image and add styling using tailwindcss, I got stuck at this point.
I wanted to change the src of the image to be changed on the basics of screensize. Like if I am in sm screen size, then it should display IMG1 and after md screen size, it should display IMG2.
Also, I want to change the height and 'widthattributes of thenext/Image` component subjective to the different screensize.
How Can I do so?
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;
I had solved the issue by this,
Putting the two images in a div wrapper and hiding them on the basis of screen size.
<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>