Asset

Import

import { Asset } from '@contentful/f36-components';
// or
import { Asset } from '@contentful/f36-asset';

Examples

Basic usage

Hide code
function AssetExample() {
  return (
    <Asset
      src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=200&h=300"
      title="A PDF asset"
      type="pdf"
    />
  );
}
Open in Playground

An image asset

By default an asset with the type image will render the src attribute directly, like a HTML <img /> element.

Hide code
function ImageAssetExample() {
  return (
    <Asset
      src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=200&h=300"
      title="An image asset"
      type="image"
    />
  );
}
Open in Playground

An archived image asset

If asset status is set to archived, an image icon is displayed instead of the actual image.

Hide code
function ArchivedAssetExample() {
  return (
    <Asset
      src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=200&h=300"
      status="archived"
      title="An archived image asset"
      type="image"
    />
  );
}
Open in Playground