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 context.

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

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

Parameters

{
  assetId: null | TLAssetId
  shapeId: TLShapeId
}

Returns

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