Image

An image is a graphic representation of something (e.g., photo or illustration). The backgrounds have been added to some of examples in order to help visualize empty space in the image frame.

Usage


Basic

<BitImage Alt="Basic BitImage" Src="images/bit-logo-blue.png" />

<BitImage Alt="Disabled BitImage" IsEnabled="false" Src="images/bit-logo-blue.png" />
Basic BitImage


Disabled
Disabled BitImage

Width & Height

<BitImage Width="9rem"
          Alt="BitImage with width"
          Style="background-color: #00ffff17"
          Src="images/bit-logo-blue.png" />
                
<BitImage Height="5rem"
          Alt="BitImage with height"
          Style="background-color: #00ffff17"
          Src="images/bit-logo-blue.png" />
             
<BitImage Width="256px"
          Height="128px"
          Alt="BitImage with width and height"
          Style="background-color: #00ffff17"
          Src="images/bit-logo-blue.png" />
Width
BitImage with width


Height
BitImage with height


Width & Height
BitImage with width and height

ImageFit

<BitImage Height="96"
          Alt="ImageFit: None BitImage"
          ImageFit="BitImageFit.None"
          Style="background-color: #00ffff17"
          Src="images/bit-logo-blue.png" />

<BitImage Height="96"
          Alt="ImageFit: Center BitImage"
          ImageFit="BitImageFit.Center"
          Style="background-color: #00ffff17"
          Src="images/bit-logo-blue.png" />

<BitImage Height="96"
          Alt="ImageFit: Contain BitImage"
          ImageFit="BitImageFit.Contain"
          Style="background-color: #00ffff17"
          Src="images/bit-logo-blue.png" />

<BitImage Height="96"
          Alt="ImageFit: Cover BitImage"
          ImageFit="BitImageFit.Cover"
          Style="background-color: #00ffff17"
          Src="images/bit-logo-blue.png" />

<BitImage Height="96"
          Alt="ImageFit: CenterContain BitImage"
          ImageFit="BitImageFit.CenterContain"
          Style="background-color: #00ffff17"
          Src="images/bit-logo-blue.png" />

<BitImage Height="96"
          Alt="ImageFit: CenterCover BitImage"
          ImageFit="BitImageFit.CenterCover"
          Style="background-color: #00ffff17"
          Src="images/bit-logo-blue.png" />
None
ImageFit: None BitImage


Center
ImageFit: Center BitImage


Contain
ImageFit: Contain BitImage


Cover
ImageFit: Cover BitImage


CenterContain
ImageFit: CenterContain BitImage


CenterCover
ImageFit: CenterCover BitImage

Cover

<BitImage Height="96"
          Alt="Landscape BitImage with ImageFit: CenterCover"
          Style="background-color: #00ffff17"
          ImageFit="BitImageFit.CenterCover"
          Cover="BitImageCover.Landscape"
          Src="images/bit-logo-blue.png" />

<BitImage Height="144"
          Width="96"
          Alt="Portrait BitImage with ImageFit: CenterCover"
          Style="background-color: #00ffff17"
          ImageFit="BitImageFit.CenterCover"
          Cover="BitImageCover.Portrait"
          Src="images/bit-logo-blue.png" />


<BitImage Height="96"
          Alt="Landscape BitImage with ImageFit: CenterContain"
          Style="background-color: #00ffff17"
          ImageFit="BitImageFit.CenterContain"
          Cover="BitImageCover.Landscape"
          Src="images/bit-logo-blue.png" />

<BitImage Height="144"
          Width="96"
          Alt="Portrait BitImage with ImageFit: CenterContain"
          Style="background-color: #00ffff17"
          ImageFit="BitImageFit.CenterContain"
          Cover="BitImageCover.Portrait"
          Src="images/bit-logo-blue.png" />
ImageFit: CenterCover

Landscape
Landscape BitImage with ImageFit: CenterCover

Portrait
Portrait BitImage with ImageFit: CenterCover




ImageFit: CenterContain

Landscape
Landscape BitImage with ImageFit: CenterContain

Portrait
Portrait BitImage with ImageFit: CenterContain

MaximizeFrame

<BitImage Alt="Maximized BitImage" MaximizeFrame="true" Src="images/bit-logo-blue.png" />
Maximized BitImage

ImageState

<BitButton OnClick="() => loadLoading = true">Load image</BitButton>
@if (loadLoading)
{
    <BitImage Alt="Loading ImageState" Src="/api/Image/GetImage" Width="200px">
        <LoadingTemplate>
            <b>loading...</b>
        </LoadingTemplate>
    </BitImage>
}

<BitButton OnClick="() => loadError = true">Load image</BitButton>
@if (loadError)
{
    <BitImage Alt="Error ImageState" Src="/api/Image/GetImageError" Width="200px">
        <LoadingTemplate><b>...</b></LoadingTemplate>
        <ErrorTemplate>
            <b>error!!!</b>
        </ErrorTemplate>
    </BitImage>
}
@code {
    example6CsharpCode
}
Loading





Error

Style & Class

< style>
    .custom-class {
        padding: 0.5rem;
        filter: hue-rotate(45deg);
        background-color: blueviolet;
    }

    .custom-image {
        width: 16rem;
        filter: opacity(25%);
        border-radius: 1rem 3rem;
    }
</style>

<BitImage Alt="Styled BitImage"
          Style="border: 2px solid goldenrod; border-radius: 5px; width: 258px;"
          Src="images/bit-logo-blue.png" />
                    
<BitImage Alt="Styled BitImage"
          Class="custom-class"
          Src="images/bit-logo-blue.png" />
                   

<BitImage Alt="Styled BitImage"
          Styles="@(new() { Image = "filter: blur(5px)" })"
          Src="images/bit-logo-blue.png" />
                    
<BitImage Alt="Styled BitImage"
          Classes="@(new() { Image = "custom-image" })"
          Src="images/bit-logo-blue.png" />
Component's Style & Class:

Styled
Styled BitImage

Classed
Styled BitImage




Styles & Classes:

Styles
Styled BitImage

Classes
Styled BitImage

API

BitImage parameters

Name Type Default value Description
Alt string? null Specifies an alternate text for the image.
Classes BitImageClassStyles? null Custom CSS classes for different parts of the BitImage.
Cover BitImageCover? null Specifies the cover style to be used for this image.
ErrorTemplate RenderFragment? null The custom template used to show the error state of the image.
FadeIn bool true If true, fades the image in when loaded.
Height string? null The image height value.
ImageAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the image's parameters
ImageFit BitImageFit? null Used to determine how the image is scaled and cropped to fit the frame.
Loading BitImageLoading? null Allows for browser-level image loading (lazy or eager).
LoadingTemplate RenderFragment? null The custom template used to show the loading state of the image.
MaximizeFrame bool false If true, the image frame will expand to fill its parent container.
OnClick EventCallback<MouseEventArgs> null Callback for when the image is clicked.
OnLoadingStateChange EventCallback<BitImageState> null Optional callback method for when the image load state has changed.
StartVisible bool true If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until it is successfully loaded.
Src string? null Specifies the src of the image.
Styles BitImageClassStyles? null Custom CSS styles for different parts of the BitImage.
Title string? null The title to show when the mouse is placed on the image.
Width string? null The image width value.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id string? null Gets or sets the unique identifier for the component's root element.
IsEnabled bool true Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitImageClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the image.
Image string? null Custom CSS classes/styles for the image element.

BitImageFit enum

Name Value Description
None 0 Neither the image nor the frame are scaled.
Center 1 The image is not scaled. The image is centered and cropped within the content box.
CenterContain 2 The image will be centered horizontally and vertically within the frame and maintains its aspect ratio.
CenterCover 3 The image will be centered horizontally and vertically within the frame and maintains its aspect ratio.
Contain 4 The image is scaled to maintain its aspect ratio while being fully contained within the frame.
Cover 4 The image is scaled to maintain its aspect ratio while filling the frame.

BitImageCover enum

Name Value Description
Landscape 0 The image will be shown at 100% height of container and the width will be scaled accordingly.
Portrait 1 The image will be shown at 100% width of container and the height will be scaled accordingly.

BitImageState enum

Name Value Description
Loading 0 The image is loading from its source.
Loaded 1 The image has been loaded successfully.
Error 2 An error has been encountered while loading the image.

BitImageLoading enum

Name Value Description
Eager 0 The default behavior, eager tells the browser to load the image as soon as the img element is processed.
Lazy 1 Tells the user agent to hold off on loading the image until the browser estimates that it will be needed imminently.

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.


Or you can review / edit this page on GitHub.


Or you can review / edit this component on GitHub.