Storage Image

The Storage Image lets you load images from Amplify Storage.

Basic Usage

Wait!

Did you follow the quick start instructions to set up the storage and auth services?

Next.js 13.4+ introduces App Router with the usage of Server Components. Amplify UI components are interactive and designed to work on the client side. To use them inside of Server Components you must wrap them in a Client Component with "use client". For more info, visit Next.js third party package documentation.

If you are using Next.js Pages Router, no changes are required to use Amplify UI components.

To use the StorageImage component, import it into your React application with the included styles.

npm install @aws-amplify/ui-react-storage aws-amplify

yarn add @aws-amplify/ui-react-storage aws-amplify

import { StorageImage } from '@aws-amplify/ui-react-storage';
import '@aws-amplify/ui-react/styles.css';

At a minimum you must include the alt, imgKey and accessLevel props. accessLevel refers to the Amplify Storage access level, which is 'guest' | 'protected' | 'private'.

import { StorageImage } from '@aws-amplify/ui-react-storage';

export const DefaultStorageImageExample = () => {
  return <StorageImage alt="cat" imgKey="cat.jpg" accessLevel="guest" />;
};

Props

Name	Description	Type
alt	Alternative text description of the image	`string`
imgKey	The key of an image.	`string`
accessLevel	Access level for files in Storage. See https://docs.amplify.aws/lib/storage/configureaccess/q/platform/js/	`'guest' \| 'protected' \| 'private'`
identityId?	The unique Amazon Cognito Identity ID of the image owner. Required when loading a protected image.	`string`
fallbackSrc?	A fallback image source to be loaded when the component fails to load the image from Storage	`string`
onStorageGetError?	Triggered when an error happens calling Storage.get	`(error: Error) => void;`

Note: A new Storage.get request is made only when the imgKey changes.

Error Handling

To handle the error caused by Storage.get, you can pass a onStorageGetError handler and optionally provide a fallbackSrc for the component to load a fallback image.

import { StorageImage } from '@aws-amplify/ui-react-storage';

export const StorageImageErrorHandlingExample = () => {
  return (
    <StorageImage
      alt="fallback cat"
      imgKey="cat.jpg"
      accessLevel="guest"
      fallbackSrc="/fallback_cat.jpg"
      onStorageGetError={(error) => console.error(error)}
    />
  );
};

Customization

Target Classes

Class	Description
`amplify-storageimage`	Class applied to the img tag

No variables available for this component