Image

A component for rendering images:

From external URLs
From a local path on the server hosting a Smelter instance

Usage

import { Image, View } from "@swmansion/smelter";
import Smelter from "@swmansion/smelter-node";

function ExampleApp() {
  return (
    <View style={{ backgroundColor: "#52505b" }}>
      <Image source="https://example.com/image.svg" />
    </View>
  );
}

22 collapsed lines
async function run() {
  const smelter = new Smelter();
  await smelter.init();

  await smelter.registerOutput("output", <ExampleApp />, {
    type: "mp4",
    serverPath: "./output.mp4",
    video: {
      encoder: {
        type: "ffmpeg_h264",
        preset: "ultrafast",
      },
      resolution: {
        width: 1920,
        height: 1080,
      },
    },
  });

  await smelter.start();
}
void run();

Example output

Reference

Type definitions

type ImageProps = {
    id?: string;
    imageId?: string;
    source?: string;
    style?: ImageStyleProps;
}

Props

imageId

ID of an image. It identifies an image registered using a Smelter.registerImage method.

Type: string

source

Url or local path to the mp4 file. Note that the path has to be local to the machine where Smelter server runs.

Type: string

id

ID of a component.

Type: string
Default value: Value produced by useId hook

style

Image styling properties.

Type: ImageStyleProps

ImageStyleProps

Type definitions

type ImageStyleProps = {
    width?: number;
    height?: number;
}

width

Width of the image in pixels. If height is not explicitly provided, the image will automatically adjust its height to maintain its original aspect ratio relative to the width.

Type: number

height

Height of the image in pixels. If width is not explicitly provided, the image will automatically adjust its width to maintain its original aspect ratio relative to the height.

Type: number