Component Assets Overview - Metabind

Components can have bound assets (images, icons, fonts, etc.) that are included when the component is packaged. These assets are served from the CDN and referenced in the component code by URL.

Asset URL Structure

Component assets are served with this URL pattern:

https://cdn.metabind.ai/{organizationId}/{projectId}/components/{componentId}/latest/assets/{assetId}/{filename}

Using Assets in Components

Reference a bound asset in component code by passing its url to Image:

const body = () => {
  // Use the asset's `url` from the Component Assets API
  return Image({
    url: 'https://cdn.metabind.ai/org123/proj456/components/c123/latest/assets/asset123/logo-2x.png'
  });
};

When a package is created, all assets referenced by the component are included in the package and served from versioned URLs.