> For the complete documentation index, see [llms.txt](https://docs.trydrupal.com/radix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trydrupal.com/radix/components/image.md).

# Image

[**Bootstrap docs**](https://getbootstrap.com/docs/5.3/content/images/)

### Component Properties

* `src`: (required) The image source URL.
* `alt`: (optional) The image alt text. 
* `title`: (optional) The image title.
* `align` : (optional) Align images with the helper float classes or text alignment classes. block-level images can be centered using the `.mx-auto` margin utility class. options (`float-start`, `mx-auto d-block`, `float-end`) 
* `responsive` : (optional) Images in Bootstrap are made responsive with `.img-fluid`. This applies max-width with 100% and height with auto to the image so that it scales with the parent width. `thumbnails` : (optional)(true|false) In addition to Bootstrap border-radius utilities, you can use `.img-thumbnail` to give an image a rounded 1px border appearance. 
* `rounded` : (optional)(true|false) Rounded image.
* `image_utility_classes` : An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.

### Usage

Use the Image component with all possible options:

```twig
{%
  include 'radix:image' with {
    src: 'https://picsum.photos/id/140/600.jpg',
    alt: 'Image alt description',
    title: 'Image title',
    align: 'center',
    responsive: true,
    rounded: true,
    thumbnails: true,
    width: 600,
    height: 400,
    loading: 'lazy',
    image_utility_classes: [
      'mb-5',
    ],
    attributes: create_attribute().setAttribute('crossorigin', 'anonymous'),
  }
%}
```