useImageOrVideoAsset

This is a handy helper hook that resolves an asset to an optimized URL for a given shape, or its placeholder if the asset is still uploading. This is used in particular for high-resolution images when you want lower and higher resolution depending on the size of the image on the canvas and the zoom level.

For image scaling to work, you need to implement scaled URLs in TLAssetStore.resolve.

function useImageOrVideoAsset({
  shapeId,
  assetId,
  width,
}: UseImageOrVideoAssetOptions): {
  asset: (TLImageAsset | TLVideoAsset) | null
  url: null | string
}

Parameters

UseImageOrVideoAssetOptions

Returns

{
  asset: (TLImageAsset | TLVideoAsset) | null
  url: null | string
}