# r-image Displays a responsive image with configurable size, object-fit, optional caption, and accessible alt text. Example ``` ``` ## class: `RImage`, `r-image` ### Fields | Name | Privacy | Type | Default | Description | Inherited From | | ---------------- | ------- | ---------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | -------------- | | `alt` | | `string` | | Accessible description of the image | | | `caption` | | `string` | | Text displayed as an image caption (if size of an image is not "small"). | | | `errorAlt` | | `string` | `'Unable to load image'` | Accessible label for the error state | | | `height` | | `string` | | Height of the image | | | `loadingAlt` | | `string` | `'Image is loading'` | Accessible label for the loading state | | | `objectFit` | | `"contain" \| "cover" \| "fill" \| "none" \| "scale-down"` | `'cover'` | Controls how the image is cropped/scaled within its box | | | `objectPosition` | | `string` | | Controls the anchor point of the image within its box. Accepts any CSS object-position value, e.g. 'top', 'center', '50% 20%'. | | | `reloadText` | | `string` | `'Reload'` | Text to be shown in the error state for medium and large images | | | `size` | | `"custom" \| "large" \| "medium" \| "small"` | `'small'` | Visual size | | | `src` | | `string` | | URL of the image to display | | | `width` | | `string` | | Width of the image | | ### Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------------ | ------- | -------------------------------------------- | ------------- | --------------- | -------------- | | `setError` | | Sets UI of the component into error state. | | `Promise` | | | `setLoading` | | Sets UI of the component into loading state. | | `Promise` | | | `setSrc` | | Updates the image src | `src: string` | `Promise` | | ### Events | Name | Type | Description | Inherited From | | ------------ | --------------------- | ---------------------------------------------- | -------------- | | `rComplete` | `CustomEvent` | Emitted when the image has successfully loaded | | | `rFailed` | `CustomEvent` | Emitted when the image fails to load | | | `rLoading` | `CustomEvent` | Emitted when the image starts loading | | | `rSrcChange` | `CustomEvent` | Emitted when the src property changes | | ### Attributes | Name | Field | Inherited From | | ----------------- | -------------- | -------------- | | `alt` | alt | | | `caption` | caption | | | `error-alt` | errorAlt | | | `height` | height | | | `loading-alt` | loadingAlt | | | `object-fit` | objectFit | | | `object-position` | objectPosition | | | `reload-text` | reloadText | | | `size` | size | | | `src` | src | | | `width` | width | | ### CSS Parts | Name | Description | | --------- | ------------------------------ | | `caption` | The `