TA貢獻(xiàn)2021條經(jīng)驗(yàn) 獲得超8個(gè)贊
另一種選擇（至少在 v5 中）是使用 Box 組件并選擇底層 html 元素為 img，如下例所示（從v5的官方文檔中復(fù)制）
<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貢獻(xiàn)1752條經(jīng)驗(yàn) 獲得超4個(gè)贊
沒有這種特定的自定義 img 組件可用于 material-ui。
但是您可以在另一個(gè)包裝器組件中使用簡(jiǎn)單的 html img 組件來(lái)自己創(chuàng)建自定義 img 組件。例如
<Paper variant="outlined">
<img src="url" />
</Paper>
組件也<CardMedia/>必須與<Card/>組件一起使用。另一個(gè)使用圖像的組件是<Avatar>組件。
<Avatar alt="Example Alt" src="/static/images/avatar.jpg" />
TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超10個(gè)贊
Material-ui推薦使用Material-ui-image，你必須單獨(dú)安裝它，但我真的很喜歡使用它。安裝后，正如預(yù)期的那樣，它很簡(jiǎn)單：
import Image from "material-ui-image";
...
<Image src="image/src/" />
TA貢獻(xiàn)1884條經(jīng)驗(yàn) 獲得超4個(gè)贊
在我回答這個(gè)問題時(shí)，最新版本MUI是5.2.2并且沒有確切的圖像組件，但MUI提到了兩個(gè)第三方提供的圖像組件。一個(gè)是mui-image，另一個(gè)是material-ui-image。根據(jù) MUI，“mui-image是唯一滿足加載圖像的 Material 指南的 MUI 圖像組件”。
mui-image您可以通過以下幾個(gè)步驟輕松安裝：
安裝：
npm i mui-image
//or
yarn add mui-image
進(jìn)口：
import Image from 'mui-image'
// or
import { Image } from 'mui-image'
利用：
<Image src="my-image.png" />
有關(guān)詳細(xì)信息mui-image props和更多信息，請(qǐng)?jiān)诖颂巒pmjs查看包文檔。
舉報(bào)