Material UI 是否有 Image 组件？答案

【问题标题】：Does Material UI have an Image component?Material UI 是否有 Image 组件？
【发布时间】：2020-07-30 11:38:40
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

material-ui 没有这种特定的自定义 img 组件可用。

但是您可以在另一个包装器组件中使用简单的 html img 组件来自己创建自定义 img 组件。例如

<Paper variant="outlined">
   <img src="url" />
</Paper>

另外<CardMedia/> 组件必须与<Card/> 组件一起使用。另一个使用图像的组件是<Avatar> 组件。

<Avatar alt="Example Alt" src="/static/images/avatar.jpg" />

【讨论】：

【解决方案2】：

Material-ui recommends 使用 Material-ui-image，你必须单独安装它，但我真的很喜欢使用它。安装后，正如预期的那样，它很简单：

import Image from "material-ui-image";
...
<Image src="image/src/" />

【讨论】：

【解决方案3】：

另一个选项（至少在 v5 中）是使用 Box 组件并选择底层 html 元素为 img，如下例所示（复制自 official docs for v5）

     <Box
        component="img"
        sx={{
          height: 233,
          width: 350,
          maxHeight: { xs: 233, md: 167 },
          maxWidth: { xs: 350, md: 250 },
        }}
        alt="The house from the offer."
        src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&w=350&dpr=2"
      />

【讨论】：

谢谢。我是 MUI 的新手，这在文档中通过了我
我对它也有点陌生，我也花了一段时间才注意到这一点，所以我很高兴能帮助您避免花时间弄清楚它。

【解决方案4】：

在我回答这个问题时，MUI 的最新版本是5.2.2，并且没有确切的图像组件，但MUI 提到了两个第三方提供的image 组件。一个是mui-image，另一个是material-ui-image。根据 MUI，“mui-image 是唯一满足加载图像的材料指南的 MUI 图像组件”。

您可以通过以下几个步骤轻松安装mui-image：

安装：

npm i mui-image
//or
yarn add mui-image

进口：

import Image from 'mui-image'
// or
import { Image } from 'mui-image'

用途：

<Image src="my-image.png" />

有关mui-imageprops 的详细信息以及更多信息，请查看npmjs 包文档here。

【讨论】：

【解决方案5】：

您可以在 Material UI 中使用 CardMedia，如下所示。请参阅Material UI Example

中的复杂交互部分

<CardMedia
    className={classes.media}
    image="/static/images/cards/paella.jpg"
    title="Paella dish"
/>

【讨论】：

【解决方案6】：

使用Avatar 组件

<Avatar variant={"rounded"} alt="The image" src={url} style={{
    width: 200,
    height: 200,
  }} />

Docs

【讨论】：