Image - bit BlazorUI

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

Disabled

Width & Height

Width

Height

Width & Height

ImageFit

None

Center

Contain

Cover

CenterContain

CenterCover

Cover

ImageFit: CenterCover

Landscape

Portrait

ImageFit: CenterContain

Landscape

Portrait

MaximizeFrame

ImageState

Loading

Error

Style & Class

Component's Style & Class:

Styled

Classed

Styles & Classes:

Styles

Classes

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	The aria-label of the control for the benefit of screen readers.
Class	string?	null	Custom CSS class for the root element of the component.
Dir	BitDir?	null	Determines the component direction.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Capture and render additional attributes in addition to the component's parameters.
Id	string?	null	Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled	bool	true	Whether or not the component is enabled.
Style	string?	null	Custom CSS style for the root element of the component.
Visibility	BitVisibility	BitVisibility.Visible	Whether the component is visible, hidden or collapsed.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement	ElementReference		The ElementReference of the root element.

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.

On this page