Image

A simple component that represent the HTML img tag.

API
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 represent the <img> tag and creates a holding space for the referenced image.

Mony the dog
<MudImage Src="images/mony.jpg" Alt="Mony the dog" Elevation="25" Class="rounded-lg"/>
Size

Size can be directly set on the image with the Width and Height property, it can also be useful to set this even if you want a responsive image, setting them will make the image take up set space even before they are loaded which can be useful if your pictures takes long time to load.

Swedish Farm House Swedish Farm House
<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"/>
Responsive Images

To get responsive images set the Fluid property to true. This applies max-width: 100%; and height: auto; so the image scales with the parent's width.
Resize the example bellow to see how the image scales with the parents with.

Swedish Farm House
<MudImage Fluid="true" Src="images/iceland.jpg" Alt="Swedish Farm House" Class="rounded-lg"/>
Image Fit

Use ObjectFit to controll how a image should be resized.

Örebro Slott
None
Cover
Contain
Fill
ScaleDown
<div class="d-flex justify-center">
    <MudImage ObjectFit="@ImageFit" Height="200" Width="400" Src="images/castle.jpg" Alt="Örebro Slott"  Elevation="25" Class="rounded-lg"/>
</div>

<MudChipSet T="string" CheckMark Class="mt-12">
    <MudChip Text="None" OnClick="@(() => SetImageFit(ObjectFit.None))" SelectedColor="Color.Primary" />
    <MudChip Text="Cover" OnClick="@(() => SetImageFit(ObjectFit.Cover))" SelectedColor="Color.Primary" Default="true"/>
    <MudChip Text="Contain" OnClick="@(() => SetImageFit(ObjectFit.Contain))" SelectedColor="Color.Primary" />
    <MudChip Text="Fill" OnClick="@(() => SetImageFit(ObjectFit.Fill))" SelectedColor="Color.Primary" />
    <MudChip Text="ScaleDown" OnClick="@(() => SetImageFit(ObjectFit.ScaleDown))" SelectedColor="Color.Primary" />
</MudChipSet>

@code {
    ObjectFit ImageFit = ObjectFit.Cover;

    void SetImageFit(ObjectFit value)
    {
        ImageFit = value;
    }
}
Image Position

With the ObjectPosition property you can specify how a image should be positioned within its container.

Öxarárfoss, Iceland
Center
Top
Bottom
Left
Left Top
Left Bottom
Right
Right Top
Right Bottom
<div class="d-flex justify-center">
    <MudImage ObjectFit="ObjectFit.None" ObjectPosition="@ImagePosition" Height="200" Width="400" Src="images/iceland.jpg" Alt="Öxarárfoss, Iceland"  Elevation="25" Class="rounded-lg"/>
</div>

<MudChipSet T="string" CheckMark Class="mt-12">
    <MudChip Text="Center" OnClick="@(() => SetImagePosition(ObjectPosition.Center))" SelectedColor="Color.Primary" Default="true" />
    <MudChip Text="Top" OnClick="@(() => SetImagePosition(ObjectPosition.Top))" SelectedColor="Color.Primary" />
    <MudChip Text="Bottom" OnClick="@(() => SetImagePosition(ObjectPosition.Bottom))" SelectedColor="Color.Primary" />
    <MudChip Text="Left" OnClick="@(() => SetImagePosition(ObjectPosition.Left))" SelectedColor="Color.Primary" />
    <MudChip Text="Left Top" OnClick="@(() => SetImagePosition(ObjectPosition.LeftTop))" SelectedColor="Color.Primary" />
    <MudChip Text="Left Bottom" OnClick="@(() => SetImagePosition(ObjectPosition.LeftBottom))" SelectedColor="Color.Primary" />
    <MudChip Text="Right" OnClick="@(() => SetImagePosition(ObjectPosition.Right))" SelectedColor="Color.Primary" />
    <MudChip Text="Right Top" OnClick="@(() => SetImagePosition(ObjectPosition.RightTop))" SelectedColor="Color.Primary" />
    <MudChip Text="Right Bottom" OnClick="@(() => SetImagePosition(ObjectPosition.RightBottom))" SelectedColor="Color.Primary" />
</MudChipSet>

@code {
    ObjectPosition ImagePosition = ObjectPosition.Center;

    void SetImagePosition(ObjectPosition value)
    {
        ImagePosition = value;
    }
}
Playground

Mony the dog
Options

Width: 300px

Height: Auto

<MudGrid>
    <MudItem xs="12" md="8" Class="d-flex justify-center align-center" Style="height:500px;">
        <MudImage ObjectFit="ImageFit" Height="@(SetHeight ? ImageHeight : null)" Width="@(SetWidth ? ImageWidth : null)" Src="@($"images/{Image}")" Alt="Mony the dog" Elevation="25" Class="rounded-lg"/>
    </MudItem>
    <MudItem xs="12" md="4">
        <MudPaper Class="pa-4 mt-6 mt-lg-16" Elevation="0">
            <MudText Typo="Typo.h6">Options</MudText>
            <MudSelect Label="Image" AnchorOrigin="Origin.BottomCenter" Dense="true" Margin="Margin.Dense" @bind-Value="Image" Class="mt-4">
                <MudSelectItem T="string" Value="@("tractor.jpg")">Tractor</MudSelectItem>
                <MudSelectItem T="string" Value="@("door.jpg")">Door</MudSelectItem>
                <MudSelectItem T="string" Value="@("castle.jpg")">Castle</MudSelectItem>
                <MudSelectItem T="string" Value="@("iceland.jpg")">Iceland</MudSelectItem>
                <MudSelectItem T="string" Value="@("pilars.jpg")">Pilars</MudSelectItem>
                <MudSelectItem T="string" Value="@("sweden.jpg")">Sweden</MudSelectItem>
            </MudSelect>
            <MudSelect Label="Image Fit" AnchorOrigin="Origin.BottomCenter" Dense="true" Margin="Margin.Dense" @bind-Value="ImageFit" Class="mt-4">
                <MudSelectItem T="ObjectFit" Value="ObjectFit.None">None</MudSelectItem>
                <MudSelectItem T="ObjectFit" Value="ObjectFit.Cover">Cover</MudSelectItem>
                <MudSelectItem T="ObjectFit" Value="ObjectFit.Contain">Contain</MudSelectItem>
                <MudSelectItem T="ObjectFit" Value="ObjectFit.Fill">Fill</MudSelectItem>
                <MudSelectItem T="ObjectFit" Value="ObjectFit.ScaleDown">ScaleDown</MudSelectItem>
            </MudSelect>
            <div class="d-flex justify-space-between align-center mt-4">
                <MudText>Width: @(SetWidth ? $"{ImageWidth}px" : "Auto")</MudText>
                <MudSwitch @bind-Value="SetWidth" Color="Color.Primary" Class="mr-0" />
            </div>
            <MudSlider @bind-Value="ImageWidth" Disabled="@(!SetWidth)" Max="400" Color="Color.Primary"/>
            <div class="d-flex justify-space-between align-center mt-4">
                <MudText>Height: @(SetHeight ? $"{ImageHeight}px" : "Auto")</MudText>
                <MudSwitch @bind-Value="SetHeight" Color="Color.Secondary" Class="mr-0" />
            </div>
            <MudSlider @bind-Value="ImageHeight" Disabled="@(!SetHeight)" Max="350" Color="Color.Secondary"/>
        </MudPaper>
    </MudItem>
</MudGrid>

@code {
    public string Image { get; set; } = "tractor.jpg";
    
    public bool SetHeight { get; set; } = false;
    public bool SetWidth { get; set; } = true;
    
    public int ImageHeight { get; set; } = 300;
    public int ImageWidth { get; set; } = 300;

    public ObjectFit ImageFit { get; set; } = ObjectFit.Cover;

}
An unhandled error has occurred. Reload 🗙