Material UI 有圖像組件嗎？

Question

我以前用過其他的react組件，他們大多有自己的Image組件，但我在Material-UI中找不到？

還是通過 CardMediaAPI 完成？ 或者只是使用標簽？ 謝謝！

Answer 1

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 2

Material-ui 建議使用Material-ui-image ，您必須單獨安裝它，但我真的很喜歡使用它。 安裝后，正如預期的那樣，它很簡單：

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

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 中的 CardMedia，如下所示。 請參閱Material UI 示例中的復雜交互部分

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

Answer 5

另一種選擇（至少在 v5 中）是使用 Box 組件和 select 底層 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 6

將 Box 組件與組件屬性一起使用：

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

Answer 7

使用Avatar組件

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

文檔

Answer 8

在我回答這個問題的時候， MUI的最新版本是5.2.2並且沒有確切的圖像組件，但是MUI提到了兩個第三方提供的圖像組件。 一個是mui-image ，另一個是material-ui-image 。 根據 MUI，“ mui-image是唯一滿足加載圖像的材料指南的 MUI 圖像組件”。

如果您有興趣使用mui-image ，請點擊此處。

Answer 9

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

更多細節