Material UI 是否有 Image 组件？

Question

我之前用过其他的 react 组件，它们大多都有自己的 Image 组件，但是我在 Material-UI 中找不到？还是通过 CardMediaAPI 完成的？还是简单地使用标签？谢谢！

Answer 1

另一种选择（至少在 v5 中）是使用 Box 组件并选择底层 html 元素为 img，如下例所示（从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"

      />

Answer 2

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

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

<Paper variant="outlined">

   <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

//or

yarn add mui-image

进口：

import Image from 'mui-image'

// or

import { Image } from 'mui-image'

利用：

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

有关详细信息mui-image props和更多信息，请在此处npmjs查看包文档。