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 icononly: 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 trueandthumbnail-sizeis 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 sourceis interpreted. | E8ImageSourceTypes | 'image' | 
| thumbnail-size | For fileonly: 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. | — |