VCS Image component
Renders an image. Similar to <img> element in HTML. The src prop sets the image value; however, the src must be made available in session_assets.
How to provide image sources
An image source can be provided in one of three ways:
- A composition asset: These are part of the composition itself.
- For example, the baseline composition includes a small user icon that's used as the placeholder for a participant whose video is off or missing.
Composition assets cannot be customized currently but we plan to offer this option in a future release.
- A session asset: These are specified when you start a streaming session on Daily.
- These images are downloaded and validated before any VCS rendering happens, so there's a guarantee that the image is never missing (assuming the session asset URL you provided was valid, of course).
- Session assets are passed via the
session_assetsproperty in the live streaming or recording method being used. See the Session assets page for more information.
- A dynamic asset: These can be specified during a streaming session on Daily.
- Sometimes you don't have an image available before the start of the session. Dynamic assets let you pass image URLs via Daily's API at runtime. They are downloaded and validated in the background, and your VCS composition can use a hook to inspect the list of dynamic assets to determine when new content is available. (This API is not yet available.)
Props
Properties specific to the <Image> component.
| Name | Type | Description | Default value |
|---|---|---|---|
src | String | An asset name within the default namespace. See above for ways that assets can be made available. | null |
scaleMode | String | Determines how an imaine should be rendered within its layout frame. Available values: fit — image is rendered without any cropping, centered inside its layout frame, scaled as needed; fill — image is cropped and scaled to fill its layout frame; stretch — image is stretched to fill its layout frame | fit |
transform | Object | An object defining transformations to be applied at the compositing stage. Supported properties: rotate_deg (Number), which specifies the rotation of the component in degrees. | null |
blend | Object | An object of compositing-related properties. Supported child properties: opacity: (Number), which can range from 0 to 1 (0 is fully transparent, 1 is fully opaque). If you don't pass a value for blend, or the object you pass doesn't include opacity, it defaults to full opacity. | null |
Properties available to all VCS components, including this one.
| Name | Type | Description | Default value |
|---|---|---|---|
id | String | A name of your choice for the component instance. Works just like the “id” property in HTML. Primarily useful for debugging. | null |
key | String, Number | This prop has a special meaning to the React runtime. When you render components inside an array (e.g. a list), each individual item in the array should have a different value for the key prop. React uses this internally to quickly compare the rendered array with its previous version. | null |
style | Object | An object of style. Each component class has its own supported style properties. For example, the Text lets you select font styles and sizing using style, but these are not relevant to other components. Note: VCS style properties are not the same as CSS properties. | {} |
layout | Array | Allows you to hook into your rendered components into the VCS layout system. After the React render cycle completes, the layout system computes final layout frames (coordinates within the output viewport). You can guide the layout process using callback functions and data you provide using the layout prop. The first value of the array must be a layout function. The second (optional) value can be a data object containing param values, which is passed to the layout function when computing the layout. See Layout API for more details. | null |
style prop
The style prop accepts an object that can have the following values set.
| Name | Type | Description |
|---|---|---|
cornerRadius_px | Number | Apply a rounded mask to the corners of the component. |