Material UI有一个图片组件吗？

Question

之前我使用过其他的React组件，它们大多都有自己的Image组件，但是在Material-UI中我找不到它？

是通过CardMediaAPI完成的吗？还是只需使用标签即可？谢谢！

- pure

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

- Peter Gerdes

---

谢谢。我对MUI还很陌生，在文档中可能会错过这个内容。 - Chris Lear

我也算是新手，花了一段时间才注意到这点，所以很高兴能帮你避免我当时浪费的时间。 - Peter Gerdes

你有什么想法可以将'onerror'属性传递给图像组件吗？如果能够在Box上设置一个img组件的备用图像就太好了。 - Reggi

这种方法的缺点是Mui不会直接将宽度/高度属性设置到HTML元素中，这是建议的做法，以防止加载后的布局移位，请参见：https://www.w3schools.com/tags/att_img_width.asp。 - Jonathan

Answer 2

在Material-UI中没有这种特定的自定义图像组件。

但是，您可以使用简单的HTML img组件放置在其他封装组件中，自己创建自定义的img组件。例如：

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

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

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

- WitVault

Answer 3

Material-ui 推荐 使用 Material-ui-image，但需要单独安装，不过我使用它的体验非常愉快。 安装后，使用起来很简单：

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

- joshpetit

---

Material-ui现在还推荐使用mui-image[https://github.com/benmneb/mui-image]，它支持MUI v5（而Material-ui-image仅支持MUI v4及以下版本）。 - undefined

Answer 4

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

- yN.

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 包文档，此处。

- Rubel

---

问题是，既然我可以使用Box，为什么要在我的已经臃肿的项目中添加更多的依赖呢？请注意：我提出这个问题并不是为了反对你，我只是一个好奇的开发者，想要了解更多。 - Kasir Barati

@KasirBarati 使用“Image”而不是“Box”将增加您的代码可读性。 - Rubel

并不完全相信 - 因为我可以创建一个自定义组件并将其命名为Image - 但说实话，我期待听到那些能够准确指出SEO或其他类似问题的答案。 - Kasir Barati

Answer 6

我更喜欢使用styled来创建自己的图像组件：

import { styled } from '@mui/material/styles';

const StyledImg = styled('img')({});

// Or with a default style

// const StyledImg = styled('img')({
//   display: 'block',
// });

<StyledImg
  src={imagePath}
  alt='my Image'
  sx={{
    width: 50,
  }}
/>

- Fraction

Answer 7

使用组件属性与 Box 组件：

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

- Vyshnav

Answer 8

使用Avatar组件

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

文档

- panchicore

Answer 9

您可以像下面这样使用Material UI的CardMedia。请参阅Material UI示例中的复杂交互部分。保留HTML标签，不做解释。

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

- Khabir

Answer 10

使用 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}
/>
                                

更多细节

- Ali-Alrabi