{% include '@bolt-components-image/image.twig' with {
src: '/src/images/turtle.jpg',
alt: 'A Turtle'
} only %}
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
attributes
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
src
|
Source url for image. |
string
| — |
|
|
alt
|
Alt tag for image. |
string
| — |
|
|
lazyload
|
Lazyload can boost performance by loading images on demand, instead of on initial page load. |
boolean
|
true
|
|
|
no_lazy
|
Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to |
boolean
|
false
|
|
|
placeholder_color
|
A valid CSS background color property shown while image loads. |
string
|
hsl(233, 33%, 97%)
|
|
|
placeholder_image
|
Image path or image data shown while image loads. |
string
|
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
|
|
|
srcset
|
A comma seperated string of image urls and image widths, used for optimizing image loading performance. |
string
| — |
|
|
sizes
|
A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition omitted for the last item), and a source size value. Learn more. |
string
|
auto
|
|
|
useAspectRatio
(deprecated) |
Use the |
boolean
|
true
|
|
|
ratio
|
Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to 'none' to opt out of aspect ratio. |
string
, boolean
|
auto
|
|
|
max_width
|
Set the max-width of the image as a valid CSS value, e.g. '300px' or '50%'. |
string
| — |
|
|
valign
|
Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top | center | bottom) or via specific pixel or percent offset (ex. 30%). |
string
|
center
|
|
|
align
|
Allows the image's horizontal alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (left | center | right) or via specific pixel or percent offset (ex. 30%). |
string
|
center
|
|
|
cover
|
Set an image to fill its container. |
boolean
|
false
|
|
|
width
(deprecated) |
Override the default width of the image. If no height is provided, aspect ratio will be maintained. |
|
— |
|
|
height
(deprecated) |
Override the default height of the image. If no width is provided, aspect ratio will be maintained. |
|
— |
|
|
imageAttributes
(deprecated) |
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
zoom
(deprecated) |
Support will be dropped along with device viewer magnify |
boolean
|
false
|
|
npm install @bolt/components-image