@nextui-org/react的Image组件超出父容器限制拉伸问题

问题描述 #

使用@nextui-org/react的Image组件时，图片会超出父元素限制拉伸，这与原生<img>元素能正常适配容器的表现完全不同。

复现步骤 #

1. 原生<img>标签（表现正常）

"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;

图片可完美适配Card组件，不会超出容器范围。

2. NextUI Image组件（问题复现）

"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;

此时图片会拉伸并超出Card组件范围，尝试调整width/height属性、添加w-full/h-auto类均无效。

补充问题 #

移除Image组件的height属性后，图片可正常适配容器，但组件内置的骨架屏完全不显示。

内容的提问来源于stack exchange，提问作者FZ1010