MUI CardMediacomponent="picture" prop/value的用法在网站上没有过多的文档，但它的用法可以在Github上的MUI测试中看到。
摘自MUI CardMedia文档
默认情况下，我们使用元素和背景图像的组合来显示媒体。在某些情况下可能会有问题，例如，您可能希望显示视频或响应图像。* 在这些用例中使用component prop。*
component prop只是告诉MUI它应该使用什么根元素/组件作为CardMedia组件的底层元素（与默认的div元素相反）--然后像通常为该元素提供子元素一样。（video、picture等）
本质上，您只需将组件属性设置为picture，并将source和img元素 Package 为CardMedia的子元素，如下所示：

<CardMedia component="picture" height="140">
  <source srcset="https://mui.com/static/images/cards/contemplative-reptile.jpg, https://mui.com/static/images/cards/contemplative-reptile.jpg 1.5x" />
  <img
    src="https://mui.com/static/images/cards/contemplative-reptile.jpg"
    alt="logo"
  />
</CardMedia>

生产：

工作代码沙箱：https://codesandbox.io/s/infallible-dewdney-e1tuy2?file=/demo.js:410-754

如果你想生成你自己的卡片，你就必须写你自己的代码，设计系统的全部意义就在于使用系统。MUI库的某些部分是可定制的，但不是全部，这似乎是其中之一。你有两个选择，要么改变你的MUI版本，要么编写你自己的组件。
下面是如何将卡与图像介质一起使用的最小示例

import * as React from 'react';
import Card from '@mui/material/Card';
import CardMedia from '@mui/material/CardMedia';

export default function App() {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardMedia
        component="img"
        height="140"
        image="https://api.sandbox.game/experiences/09e61e83-ba95-4368-99b5-f5306ae9d13a/versions/18bdcd8d-ae09-4b45-ae53-858c0b553b41/banner"
        alt="green iguana"
      />
    </Card>
  );
}