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:

<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

Attribute	React prop	Type	Default	Description
`asset-id`	`assetId`	`string \| null`	—	Deprecated alias for `file-id`.
`duration`	`duration`	`string`	—	How long this element is active (CSS time, e.g. `"5s"`).
`file-id`	`fileId`	`string \| null`	—	Cloud file identifier — resolves to `${apiHost}/api/v1/files/${fileId}`, taking priority over `src`.
`loop`	`loop`	`boolean`	`false`	Loop attribute — when this temporal is a self-driving root under a {@link PlaybackController}, the controller wraps back to `0` instead of pausing at `duration`.
`offset`	`offset`	`number`	—	Start offset (seconds) within a parallel (`fixed`/`contain`/`fit`) parent timegroup.
`src`	`src`	`string`	—	URL of the source image file.

CSS Parts

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

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.