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

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

material-ui没有这种特定的自定义img组件。
但是，您可以在另一个 Package 器组件中使用简单的html img组件来创建您自己的自定义img组件。

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

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

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

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

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

在回答这个问题时，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-imageprops和更多信息，请查看npmjs软件包文档here。

使用Avatar组件

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

Docs

使用mui's Box component是一个很好的起点。从那里可以很容易地构建自己的可重用组件，而不需要另一个依赖项。尝试类似如下的操作：

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} />;

您可以从材料UI使用CardMedia，如下所示。请参阅Material UI Example中的复杂交互部分

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

使用CardMedia组件

const [previewImage, setPreviewImage]=  useState<any>();

const { getRootProps, getInputProps } = useDropzone({
    accept: "image/*",
    onDrop: (acceptedFiles) => {
        setPreviewImage(URL.createObjectURL(acceptedFiles[0]));
    },
});

<CardMedia
   component="img"
   sx={{
   height: 233,
   width: 350,
   maxHeight: { xs: 233, md: 167 },
   maxWidth: { xs: 350, md: 250 },
   }}
   src={previewImage}
/>

More details

将长方体组件与组件 prop 一起使用：

<Box component="img" src={image} alt={caption} sx={{ height: "50px", width: "auto" }} />