Usage
MudImage is used to embed an image in an HTML page. Images are not technically inserted into a page, but are linked to a file.
The component represents the <img> tag and creates a holding space for the referenced image.
<MudImage Src="images/mony.jpg" Alt="Mony the dog" Elevation="25" Class="rounded-lg"/>
Fallback Image
If the Src image fails to load, the FallbackSrc will be loaded.
<MudTooltip Text="Valid source"> <MudImage Src="images/jonny.jpg" Alt="Here's Johnny" Elevation="25" Class="rounded-lg ma-4" FallbackSrc="images/mony.jpg" /> </MudTooltip> <MudTooltip Text="Invalid source (typo)"> <MudImage Src="images/johnny.jpg" Alt="Here's Johnny" Elevation="25" Class="rounded-lg ma-4" FallbackSrc="images/mony.jpg" /> </MudTooltip>
Size
Size can be set directly on the image with the Width and Height properties. This can be useful even for responsive images because setting them reserves space before the images load, which helps when pictures take a long time to appear.
<MudImage Src="images/sweden.jpg" Width="200" Height="150" Alt="Swedish Farm House" Elevation="25" Class="rounded-lg ma-4"/> <MudImage Src="images/sweden.jpg" Width="332" Height="250" Alt="Swedish Farm House" Elevation="25" Class="rounded-lg ma-4"/>