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/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=200&h=300"
      title="A PDF asset"
      type="pdf"
    />
  );
}
function AssetExample() {
  return (
    <Asset
      src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.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/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=200&h=300"
      title="An image asset"
      type="image"
    />
  );
}
function ImageAssetExample() {
  return (
    <Asset
      src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.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/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=200&h=300"
      status="archived"
      title="An archived image asset"
      type="image"
    />
  );
}
function ArchivedAssetExample() {
  return (
    <Asset
      src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=200&h=300"
      status="archived"
      title="An archived image asset"
      type="image"
    />
  );
}
Open in Playground