Nexus KitImage
Image is used to display the image content.
default
import Image from "@/components/ui/Image";
export default function Page() {
return (
<Image src="https://dub.sh/mUoRWra" className="h-70 w-50" alt="demo image" />
)
}rounded
import Image from "@/components/ui/Image";
export default function Page() {
return (
<Image src="https://dub.sh/mUoRWra" className="h-70 w-50" alt="demo image" />
)
}aspectRatio
import Image from "@/components/ui/Image";
export default function Page() {
return (
<Image src="https://dub.sh/mUoRWra" className="w-50" aspectRatio={16 / 9} alt="demo image" />
)
}fit
import Image from "@/components/ui/Image";
export default function Page() {
return (
<Image src="https://dub.sh/mUoRWra" className="h-40 w-80 rounded border border-red-400" fit="contain" alt="demo image" />
)
}