TA貢獻2021條經驗 獲得超8個贊
另一種選擇（至少在 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"
/>
TA貢獻1752條經驗 獲得超4個贊
沒有這種特定的自定義 img 組件可用于 material-ui。
但是您可以在另一個包裝器組件中使用簡單的 html img 組件來自己創建自定義 img 組件。例如
<Paper variant="outlined">
<img src="url" />
</Paper>
組件也<CardMedia/>必須與<Card/>組件一起使用。另一個使用圖像的組件是<Avatar>組件。
<Avatar alt="Example Alt" src="/static/images/avatar.jpg" />
TA貢獻1831條經驗 獲得超10個贊
Material-ui推薦使用Material-ui-image，你必須單獨安裝它，但我真的很喜歡使用它。安裝后，正如預期的那樣，它很簡單：
import Image from "material-ui-image";
...
<Image src="image/src/" />
TA貢獻1884條經驗 獲得超4個贊
在我回答這個問題時，最新版本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查看包文檔。
舉報