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

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

Answer 3

使用mui 的 Box 组件是一个很好的起点。从那里，人们可以轻松构建自己的可重用组件，而不需要其他依赖项。尝试类似的方法：

import {Box, BoxProps, } from "@mui/material";

type ImgProps = {
    alt: string;
    src: string;
    // add more HTML img attributes you need
}

export const Img = (props: BoxProps & ImgProps) => <Box component='img' {...props} />;

Answer 4

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

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

Answer 5

我在回答这个问题时，最新版本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包文档。