Reactjs Mui CardMedia 的图片组件

发布于12月13日

MUI有一个用于Card的组件，其中有一个用于介质的CardMedia组件.MUI网站提供了使用CardMedia作为IMG组件的图像示例.

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

我想用图片html标记来代替img，但MUI网站没有提供这样的例子

我试过下面的例子，它确实生成了图片标签，但不确定如何在里面生成图片标签和img标签.

已在下面try

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

推荐答案

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

节选自MUI CardMedia Docs

默认情况下，我们使用元素和背景的组合用于显示媒体的图像.在某些情况下，这可能会有问题，例如，您可能想要显示视频或响应图像. Use the 100 prop for these use cases.

component prop只是告诉MUI它应该使用哪个根元素/组件作为CardMedia组件的底层元素(与缺省的div元素相反)--然后您可以像通常那样为该元素提供子元素.(video、picture等)

实际上，您只需将组件props 设置为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>

这将产生:

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

Reactjs Mui CardMedia 的图片组件

推荐答案

Reactjs相关问答推荐

安装后未渲染tailwind

如何避免react 使用ESLINTreact 挂钩/穷举-deps进行第一次呈现

try 在Dockerfile中使用AWS CLI将React构建工件上传到S3时出错

如何在单击行中的图标时避免选中ionic 复选框？

App.js中的H2组件不会动态呈现.这可能是什么问题？

当列表中的项的顺序改变并且使用唯一键作为它们的索引时，Reaction如何看待呈现方面？

无法使用导入app/page.jsx的组件中的tailwind 类文本操作和自定义动画

在 React 中，为什么不将组件和钩子结合起来呢？

尽管所有页面在 Reactjs 中都是公开的，但始终导航到特定页面

ReactJS on AWS Amplify与EC2上的Spring boot服务之间的混合内容错误

redux 工具包使用中间件构建器函数时，必须返回一个中间件数组

在 reactJS 中导航时页面重新加载

带有 webpack 错误多个文件匹配路由名称的 Expo-router.无法Bundle 或部署应用程序

Github 页面无法正确呈现 CSS，因为它是本地的

为什么此代码中的 useState 不更新(文本更新但 id 不更新)？

使用 React 中的功能组件更改另一个组件的状态

哪个是创建 React 应用程序的更好方法？

如何使用 babel 将 SVG 转换为 React 组件？

如何跨微前端 React 应用管理状态管理？

如何不旋转 mui 自动完成弹出图标？