# 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'),
  }
%}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trydrupal.com/radix/components/image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.