Accent color
# Image
## Description
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.
## 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. |
| 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. |
## 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. |
## Enums
### 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. |
## Sub Classes
### 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. |
## Examples
\n**Basic**:
```razor
Load image
@if (loadLoading)
{
loading...
}
Load image
@if (loadError)
{
...
error!!!
}
```
```csharp
example6CsharpCode
```
\n**Style & Class**:
```razor
< style>
.custom-class {
padding: 0.5rem;
filter: hue-rotate(45deg);
background-color: blueviolet;
}
.custom-image {
width: 16rem;
filter: opacity(25%);
border-radius: 1rem 3rem;
}