No existe un componente img personalizado específico disponible con material-ui.

Pero puede usar el componente html img simple dentro de otros componentes de envoltura para crear un componente img personalizado por su cuenta. p.ej

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

Además <CardMedia/> debe usarse junto con el componente <Card/> . Otro componente de este tipo que utiliza la imagen es el componente <Avatar> .

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

Puede usar CardMedia desde Material UI como se muestra a continuación. Consulte la sección Interacción compleja en el ejemplo de interfaz de usuario de material

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

Material-ui recomienda usar Material-ui-image , debe instalarlo por separado, pero realmente disfruté usarlo. Después de instalar, como se esperaba, es simplemente:

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

Otra opción (al menos en v5) es usar el componente Box y seleccionar el elemento html subyacente para que sea img como se muestra en el siguiente ejemplo (copiado de documentos oficiales para 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" />

Usar el componente Avatar

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

Documentos

Mientras respondo esta pregunta, la última versión de MUI es 5.2.2 y no hay un componente de imagen exacto, pero MUI mencionó dos componentes de imagen proporcionados por terceros. Uno es mui-image y otro es material-ui-image . De acuerdo con MUI, " mui-image es el único componente de imagen de MUI que cumple con las pautas de material para cargar imágenes".

Puede instalar mui-image fácilmente siguiendo unos pocos pasos:

Instalar en pc:

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

Importar:

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

Utilizar:

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

Para obtener detalles sobre los props mui-image y más, consulte los documentos del paquete npmjs aquí .