reactjs - Mui CardMedia 的图片组件

Question

MUI 有一个 Card 组件，在这个组件中我们有 CardMedia。 Mui 网站提供了使用 CardMedia 作为 img 组件的图像示例。

https://mui.com/material-ui/react-card/#complex-interaction

我想用图片html标签代替img，但是MUI网站没有提供例子

我试过下面的例子，它确实生成了图片标签，但不确定如何在其中获取 source 和 img 标签。

下面试过

<CardMedia
          component="picture"
          height="140"
          image="/static/images/cards/contemplative-reptile.jpg"
          alt="green iguana"
        />

想要生成

<picture>
  <source srcset="logo-768.png, logo-768-1.5x.png 1.5x" />
  <img src="logo-320.png" alt="logo" />
</picture>

Answer 1

MUI CardMedia component="picture" prop/value 的用法在网站上没有过多记录，但它是 usage can be seen in the MUI tests on Github .

摘自 MUI CardMedia Docs

By default, we use the combination of a element and a backgroundimage to display the media. It can be problematic in some situations,for example, you might want to display a video or a responsive image.Use the component prop for these use cases.

component prop只是告诉 MUI 它应该使用什么根元素/组件作为 CardMedia 组件的底层元素(而不是默认的 div 元素)——然后你提供子元素通常会为那个元素。 (视频、图片等)

基本上，您只需将组件属性设置为 picture 并将您的 source 和 img 元素包装为 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