Javascript 在react中创建动态高度宽度图像组件

我正在尝试创建一个动态图像组件，该组件将使用材质ui

CardMedia

，并且只传递高度和宽度

我有以下代码

接口ImageDim扩展样式DProps{
宽度：数字，
身高：多少
}
const MediaImage=styled.img`
宽度：${props=>props.width}px；
高度：${props=>props.height}px；
对象匹配：包含；
`;
export const BuyingImage=（）=>{
返回(
)
} 

我在别的地方打电话，比如

<BuyingImage />

有人能帮我吗？谢谢首先，请结帐，因为

CardMedia

在

卡中使用，url的道具是
image
而不是
alt

至于动态高度和宽度，只需传递值，因为道具似乎工作得足够好


导出默认函数App（）{
返回；
}
const Image=props=>{
常量宽度=props.size.width；
const height=props.size.height；
返回(
);
};

您可以在这里亲自尝试：


export default function App() {
  return <Image size={{ width: 400, height: 200 }} />;
}

const Image = props => {
  const width = props.size.width;
  const height = props.size.height;
  return (
    <Card
      style={{
        width: `${width}px`,
        height: `${height}px`
      }}
    >
      <CardMedia
        className="media"
        image={`https://via.placeholder.com/${width}x${height}`}
      />
    </Card>
  );
};