e8-image
Updated on Aug 14, 2025 3 minutes to readProvide an image (or icon) with optional preview and a mobile-friendly download action.
Overview
<e8-image> renders an image or an icon from different source types and handles loading state, responsive sizing, click‑to‑preview, and (optionally) a download button.
<e8-image
source="/assets/app_641cb0dad1fe4/public/__Articles__/assets/cardImage.jpeg"
source-type="url"
:thumbnail-size="512"
width="320px"
height="200px"
radius="rounded"
:bordered="true"
alt="Product photo"
:show-download-button="true"
download-button-variant="primary"
/>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| alt | Alternate text for accessibility and when the image fails to load. | string | — |
| bordered | Adds a border around the image. | boolean | false |
| disable-download-buttons-on-preview | Mobile-only preview option: when true, hides download/share actions inside the native preview. | boolean | false |
| download-button-variant | Variant applied to the download button. | ButtonVariants | 'primary' |
| group | Logical group id for previewing multiple images in the same session. | string | — |
| height | Desired CSS height (e.g. '320px', '100%'). | string | — |
| icon-variant | For icon only: a icon color variant`. | IconVariants | — |
| img-class | Extra classes to apply to the <img> or the icon container. | string | string[] | Record<string, boolean> | — |
| keep-aspect-ratio | When true and thumbnail-size is used, requests a thumbnail that preserves aspect ratio. Also affects how width/height are applied. | boolean | false |
| non-clickable | Disables all click behavior (no preview, no event dispatch). | boolean | false |
| radius | Corner rounding. | E8ImageRadiusVariants | — |
| responsive | The image scales with its parent. | boolean | true |
| show-download-button | Shows a small overlay button for downloading/saving (hidden for icons and while loading). | boolean | false |
| source | The image source. Meaning depends on source-type. | string | — |
| source-type | Controls how source is interpreted. | E8ImageSourceTypes | 'image' |
| thumbnail-size | For file only: requested thumbnail size (px). When set, loads a thumbnail; otherwise loads the full file. | number | 50 |
| width | Desired CSS width (e.g. '320px', '100%'). | string | — |
Events
| Event | Description | Arguments |
|---|---|---|
| on-click | Emitted when the image is clicked. | — |