Currently, I am utilizing the next/Image component for setting an image and applying styling through tailwindcss. However, I have encountered a roadblock at this juncture.
My Objective
My goal is to dynamically change the src attribute of the image based on the screen size. For instance, when in sm screen size, it should display IMG1, and after reaching md screen size, it should switch to displaying IMG2.
Additionally, I aim to alter the height and width attributes of the next/Image component depending on different screen sizes.
How can I achieve this?
Code Snippet
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;