Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

2.1K
Visualizações
Does Material UI have an Image component?

I used other react components before, they mostly have their own Image component, but I can't find that in Material-UI?

Or is it done via CardMediaAPI? or simply use tags? Thanks!

over 4 years ago · Santiago Trujillo
6 Respostas
Responde à pergunta

0

There is no such specific custom img component avaiable with material-ui.

But you can use the simple html img component inside another wrapper components to create custom img component by your own. e.g

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

Also <CardMedia/> component has to be used with in conjunction with <Card/> component. Another such component which uses image is <Avatar> component.

<Avatar alt="Example Alt" src="/static/images/avatar.jpg" />
over 4 years ago · Santiago Trujillo Relatório

0

You can use CardMedia from Material UI as below. Please see the section Complex Interaction in Material UI Example

<CardMedia
    className={classes.media}
    image="/static/images/cards/paella.jpg"
    title="Paella dish"
/>
over 4 years ago · Santiago Trujillo Relatório

0

Material-ui recommends using Material-ui-image, you have to install it separately but I have really enjoyed using it. After installing, as expected, it's simply:

import Image from "material-ui-image";
...
<Image src="image/src/" />
over 4 years ago · Santiago Trujillo Relatório

0

Another option (at least in v5) is to use the Box component and select the underlying html element to be img as given in the example below (copied from 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"
      />
over 4 years ago · Santiago Trujillo Relatório

0

Use the Avatar component

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

Docs

over 4 years ago · Santiago Trujillo Relatório

0

While I am answering this question, the latest version of MUI is 5.2.2 and there is no exact image component, but MUI had mentioned two third-party provided image components. One is mui-image and another one is material-ui-image. According to MUI, "mui-image is the only MUI image component to satisfy the Material guidelines for loading images" .

You can easily install mui-image by following few steps:

Install:

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

Import:

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

Use:

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

For details about mui-image props and more check npmjs package docs here.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda