@contentful/f36-asset

---

title: 'Asset' slug: /components/asset/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/asset' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-asset--basic' typescript: ./src/Asset.tsx

Represent an asset visually without showing the actual asset.

Useful in a file selector, a drag-n-drop component or in lists.

Import

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

Examples

Basic usage

An image asset

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

An archived image asset

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

Props (API reference)