TLImageShapeProps

Properties for an image shape. Image shapes display raster images on the canvas, with support for cropping, flipping, and asset management.

interface TLImageShapeProps {}

Example

const imageProps: TLImageShapeProps = {
  w: 300,
  h: 200,
  playing: true,
  url: "https://example.com/image.jpg",
  assetId: "asset:image123",
  crop: null,
  flipX: false,
  flipY: false,
  altText: "A sample image",
};

Properties

Alternative text for accessibility and when image fails to load

altText: string;

ID of the associated asset record, null if no asset

assetId: null | TLAssetId;

Crop data defining visible region of the image, null for no cropping

crop: null | TLShapeCrop;

Whether to flip the image horizontally

flipX: boolean;

Whether to flip the image vertically

flipY: boolean;

Height of the image shape in canvas units

h: number;

Whether animated images (like GIFs) should play

playing: boolean;

URL of the image resource

url: string;

Width of the image shape in canvas units

w: number;