Material UI 是否有 Image 组件？

Question

我之前用过其他的 react 组件，它们大多都有自己的 Image 组件，但是我在 Material-UI 中找不到？

还是通过 CardMediaAPI 完成的？还是简单地使用标签？谢谢！

Answer 1

另一种选择（至少在 v5 中）是使用 Box 组件并选择底层 html 元素为 img，如下例所示（从v5的官方文档中复制）&nbsp; &nbsp; &nbsp;<Box&nbsp; &nbsp; &nbsp; &nbsp; component="img"&nbsp; &nbsp; &nbsp; &nbsp; sx={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 233,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 350,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxHeight: { xs: 233, md: 167 },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxWidth: { xs: 350, md: 250 },&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; alt="The house from the offer."&nbsp; &nbsp; &nbsp; &nbsp; src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&w=350&dpr=2"&nbsp; &nbsp; &nbsp; />

Answer 2

没有这种特定的自定义 img 组件可用于 material-ui。但是您可以在另一个包装器组件中使用简单的 html img 组件来自己创建自定义 img 组件。例如<Paper variant="outlined">&nbsp; &nbsp;<img src="url" /></Paper>组件也<CardMedia/>必须与<Card/>组件一起使用。另一个使用图像的组件是<Avatar>组件。<Avatar alt="Example Alt" src="/static/images/avatar.jpg" />

Answer 3

Material-ui推荐使用Material-ui-image，你必须单独安装它，但我真的很喜欢使用它。安装后，正如预期的那样，它很简单：import Image from "material-ui-image";...<Image src="image/src/" />

Answer 4

在我回答这个问题时，最新版本MUI是5.2.2并且没有确切的图像组件，但MUI提到了两个第三方提供的图像组件。一个是mui-image，另一个是material-ui-image。根据 MUI，“mui-image是唯一满足加载图像的 Material 指南的 MUI 图像组件”。mui-image您可以通过以下几个步骤轻松安装：安装：npm i mui-image//oryarn add mui-image进口：import Image from 'mui-image'// orimport { Image } from 'mui-image'利用：<Image src="my-image.png" />有关详细信息mui-image props和更多信息，请在此处npmjs查看包文档。