Image

In progress

Defaults to 16/9 aspect ratio if none is provided. Caption is optional.

# Example

undefined

<hy-image 
  source-set="[{&quot;src&quot;:&quot;https://www-test.helsinki.fi/assets/drupal/styles/introduction_7_5/s3/media-image/hy_nostokuva_jorge_hki_1_1920x1080_0.jpg?h=26e0e43f&amp;itok=_fzUcoCq 658w&quot;,&quot;media&quot;:&quot;all and (min-width: 1200px)&quot;,&quot;type&quot;:&quot;image/jpeg&quot;,&quot;sizes&quot;:&quot;50vw&quot;},{&quot;src&quot;:&quot;https://www-test.helsinki.fi/assets/drupal/styles/introduction_7_5/s3/media-image/hy_nostokuva_jorge_hki_1_1920x1080_0.jpg?h=26e0e43f&amp;itok=_fzUcoCq 1x, https://www-test.helsinki.fi/assets/drupal/styles/introduction_7_5/s3/media-image/hy_nostokuva_jorge_hki_1_1920x1080_0.jpg?h=26e0e43f&amp;itok=_fzUcoCq 2x&quot;,&quot;media&quot;:&quot;all and (min-width: 960px)&quot;,&quot;type&quot;:&quot;image/jpeg&quot;},{&quot;src&quot;:&quot;/s3/files/styles/introduction_7_5_tablet/s3/media-image/hy_nostokuva_jorge_hki_1_1920x1080_0.jpg?h=26e0e43f&amp;itok=VlS63Z21 1x, https://www-test.helsinki.fi/assets/drupal/styles/introduction_7_5_wide/s3/media-image/hy_nostokuva_jorge_hki_1_1920x1080_0.jpg?h=26e0e43f&amp;itok=4oBPcoSH 2x&quot;,&quot;media&quot;:&quot;all and (min-width: 768px) and (max-width: 959px)&quot;,&quot;type&quot;:&quot;image/jpeg&quot;},{&quot;src&quot;:&quot;/s3/files/styles/introduction_7_5_mobile/s3/media-image/hy_nostokuva_jorge_hki_1_1920x1080_0.jpg?h=26e0e43f&amp;itok=6pb4xZcc 1x, /s3/files/styles/introduction_7_5_tablet/s3/media-image/hy_nostokuva_jorge_hki_1_1920x1080_0.jpg?h=26e0e43f&amp;itok=VlS63Z21 2x&quot;,&quot;media&quot;:&quot;all and (min-width: 480px) and (max-width: 767px)&quot;,&quot;type&quot;:&quot;image/jpeg&quot;},{&quot;src&quot;:&quot;/s3/files/styles/introduction_7_5_mobile/s3/media-image/hy_nostokuva_jorge_hki_1_1920x1080_0.jpg?h=26e0e43f&amp;itok=6pb4xZcc 1x, /s3/files/styles/introduction_7_5_tablet/s3/media-image/hy_nostokuva_jorge_hki_1_1920x1080_0.jpg?h=26e0e43f&amp;itok=VlS63Z21 2x&quot;,&quot;media&quot;:&quot;(min-width: 0px)&quot;,&quot;type&quot;:&quot;image/jpeg&quot;}]" 
  image-url="https://www-test.helsinki.fi/assets/drupal/styles/introduction_7_5_wide/s3/media-image/hy_nostokuva_jorge_hki_1_1920x1080_0.jpg?h=26e0e43f&amp;itok=4oBPcoSH"
  image-alt="Test image"
  caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
>
</hy-image>

# Properties

Property	Attribute	Type	Default
`aspectRatioHeight`	`aspect-ratio-height`	`number`	`9`
`aspectRatioWidth`	`aspect-ratio-width`	`number`	`16`
`caption`	`caption`	`string`	`null`
`disableLazy`	`disable-lazy`	`boolean`	`false`
`imageAlt`	`image-alt`	`string`	`null`
`imageUrl`	`image-url`	`string`	`undefined`
`sourceSet`	`source-set`	`ImageSrcSet[] \\| string`	`undefined`

# Used by

# Depends on

hy-box

Helsinki University Design System

← Icons Key figure →