e8-image
Updated on Aug 14, 2025 4 minutes to readLightweight renderer for file or url sources with explicit pixel sizing.
Overview
<e8-image> renders an image from different source types.
<e8-image
:source="object.file"
source-type="file"
width="320"
/>Properties
| Property | Description | Type | Default |
|---|---|---|---|
height | Desired height in px. | number | — |
source | The image source. Meaning depends on source-type. | string | — |
source-type | Controls how source is interpreted. | enum "SourceTypes" | — |
width | Desired width in px. | number | — |
Source & Source Types
Set the source according to the chosen source-type:
file—sourceis a file id.url—sourceis a direct HTTP(S) URL and will be loaded as-is.
Sizing & Aspect Ratio
The component calculates styles based on width, height, the image’s natural size`:
- When both width and height are provided, the image uses those exact dimensions, and the aspect ratio is not preserved.
- Otherwise, the longer side is constrained and the other side is set to
auto. If the natural size is known, it limits the displayed size tomin(100%, naturalPx).
| Type | Description |
|---|---|
enum "SourceTypes" | file or url . |