react-directus

Home > react-directus > DirectusImage

DirectusImage variable

DirectusImage is a React Component that renders an image from your Directus API.

Signature:

DirectusImage: ({ apiUrl: propsApiUrl, accessToken: propsAccessToken, asset, render, presetKey, width, height, quality, fit, format, withoutEnlargement, transforms, }: DirectusImageProps) => JSX.Element

Example

Here is an example of how to use DirectusImage

import { DirectusImage } from 'react-directus';

export const MyImage = ({ imageId }) => (
 <DirectusImage
  asset={imageId}
  quality={50}
  render={({ url }) => <img src={url}
/>}