Composition

ef-image

Renders a static image.

Use CSS object-fit: cover | contain | fill to control how the image fills its box.

Image proxy

When src is an external http:// or https:// URL, ef-image routes the request through the Editframe image proxy by default. This keeps the canvas renderer's frame captures taint-free without requiring CORS headers on the source.

If you're embedding the compositor in an environment that has no Editframe backend (such as a third-party CMS), set image-proxy="none" on the enclosing ef-configuration element instead of working around the missing proxy with data: URLs:

html

<ef-configuration image-proxy="none">
  <ef-image src="https://your-cms.example.com/media/photo.jpg"></ef-image>
</ef-configuration>

See ef-configuration — Image Proxy for the full behaviour reference and failure mode comparison.

Attributes

Filter attributes6 of 6

`asset-id`

React prop: assetId
Type: string | null
Default: —
Description: Deprecated alias for file-id.

`duration`

React prop: duration
Type: string
Default: —
Description: How long this element is active (CSS time, e.g. "5s").

`file-id`

React prop: fileId
Type: string | null
Default: —
Description: Cloud file identifier — resolves to ${apiHost}/api/v1/files/${fileId}, taking priority over src.

`loop`

React prop: loop
Type: boolean
Default: false
Description: Loop attribute — when this temporal is a self-driving root under a PlaybackController, the controller wraps back to 0 instead of pausing at duration.

`offset`

React prop: offset
Type: number
Default: —
Description: Start offset (seconds) within a parallel (fixed/contain/fit) parent timegroup.

`src`

React prop: src
Type: string
Default: —
Description: URL of the source image file.

CSS Parts

CSS parts
Part	Description
`canvas`	The rendering canvas. This canvas is a light DOM child element, not a shadow DOM element.

Events

Events
Event	Detail	Description
`child-duration-changed`	`{ duration: number }`	Fires on the nearest context-providing ancestor, when a nested media element's duration becomes known or changes.
`contentchange`	`{ reason: string }`	Fires when the image source changes in a way that affects the rendering. For example, a new value for `src`, `file-id`, or `asset-id` triggers this event.