[BUG] - skeleton is not visible without height prop in Image #3813
Description
NextUI Version
2.4.8
Describe the bug
I've encountered an issue with the Image component from @nextui-org/react where the image stretches beyond the parent element, ignoring its constraints. This behavior is different when compared to using a native <img> element, which renders the image properly within its container.
Your Example Website or App
No response
Steps to Reproduce the Bug or Issue
Steps to reproduce:
Using the NextUI Image component (causes the issue):
"use client";
import React from 'react';
import { Card, CardBody } from "@nextui-org/card";
import { Image } from "@nextui-org/react";
const Test2 = () => {
return (
<Card>
<CardBody>
<Image
width={2000}
height={2000}
alt="test2"
src="https://tailwindui.com/img/ecommerce-images/product-page-03-product-01.jpg"
/>
</CardBody>
</Card>
);
};
export default Test2;In this case, the image stretches and does not fit within the parent Card component, no matter how I adjust the width/height properties or apply classes such as w-full or h-auto.
The Image component should behave like the native <img> element, fitting appropriately inside the parent container without stretching.
Expected behavior
Using a native <img> or <Image> (from next) tag (works as expected):
"use client";
import React from 'react';
import { Card, CardBody } from "@nextui-org/card";
const Test1 = () => {
return (
<Card>
<CardBody>
<img
width={2000}
height={2000}
alt="test1"
src="https://tailwindui.com/img/ecommerce-images/product-page-03-product-01.jpg"
/>
</CardBody>
</Card>
);
};
export default Test1;The image fits perfectly inside the Card component.
Screenshots or Videos
2024-09-26.21-11-55.online-video-cutter.com.mp4
Operating System Version
Windows
Browser
Firefox