docs: add docs for StorageImage

docs/src/data/links.tsx

@@ -199,6 +199,13 @@ export const connectedComponents: ComponentNavItem[] = [
     body: "Amplify UI Storage components allow you to store files in the cloud using Amplify's Storage category",
     platforms: ['react'],
   },
+  {
+    href: '/connected-components/storage/storageimage',
+    label: 'Storage Image',
+    body: 'StorageImage component allows users to load an image managed by Amplify Storage.',
+    platforms: ['react'],
+    tertiary: true,
+  },
   {
     href: '/connected-components/storage/storagemanager',
     label: 'Storage Manager',

docs/src/pages/[platform]/connected-components/storage/storageimage/examples/DefaultStorageImageExample.tsx

@@ -0,0 +1,5 @@
+import { StorageImage } from '@aws-amplify/ui-react-storage';
+
+export const DefaultStorageImageExample = () => {
+  return <StorageImage alt="cat" imgKey="cat.jpg" accessLevel="public" />;
+};

docs/src/pages/[platform]/connected-components/storage/storageimage/examples/StorageImageErrorHandlingExample.tsx

@@ -0,0 +1,13 @@
+import { StorageImage } from '@aws-amplify/ui-react-storage';
+
+export const StorageImageErrorHandlingExample = () => {
+  return (
+    <StorageImage
+      alt="fallback cat"
+      imgKey="cat.jpg"
+      accessLevel="public"
+      fallbackSrc="/fallback_cat.jpg"
+      onStorageGetError={(error) => console.error(error)}
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/storageimage/examples/index.ts

@@ -0,0 +1,2 @@
+export { DefaultStorageImageExample } from './DefaultStorageImageExample';
+export { StorageImageErrorHandlingExample } from './StorageImageErrorHandlingExample';

docs/src/pages/[platform]/connected-components/storage/storageimage/index.page.mdx

@@ -0,0 +1,21 @@
+---
+title: Storage Image
+description: The Storage Image lets you load images from Amplify Storage.
+reactSource: packages/react-storage/src/components/StorageImage/StorageImage.tsx
+supportedFrameworks: react
+---
+
+import { Fragment } from '@/components/Fragment';
+import { getCustomStaticPath } from "@/utils/getCustomStaticPath";
+
+export async function getStaticPaths() {
+  return getCustomStaticPath(frontmatter.supportedFrameworks);
+}
+
+{/*  `getStaticProps` is required to prevent "Error: getStaticPaths was added without a getStaticProps. Without getStaticProps, getStaticPaths does nothing" */}
+
+export async function getStaticProps() {
+  return { props: {} }
+}
+
+<Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>

docs/src/pages/[platform]/connected-components/storage/storageimage/props.ts

@@ -0,0 +1,35 @@
+export const STORAGE_IMAGE = [
+  {
+    name: 'alt',
+    description: 'Alternative text description of the image',
+    type: 'string',
+  },
+  {
+    name: 'imgKey',
+    description: 'The key of an image.',
+    type: 'string',
+  },
+  {
+    name: 'accessLevel',
+    description:
+      'Access level for files in Storage. See https://docs.amplify.aws/lib/storage/configureaccess/q/platform/js/',
+    type: `'public' | 'private' | 'protected'`,
+  },
+  {
+    name: 'identityId?',
+    description:
+      'The unique Amazon Cognito Identity ID of the image owner. Required when loading a protected image.',
+    type: 'string',
+  },
+  {
+    name: 'fallbackSrc?',
+    description:
+      'A fallback image source to be loaded when the component fails to load the image from Storage',
+    type: 'string',
+  },
+  {
+    name: 'onStorageGetError?',
+    description: 'Triggered when an error happens calling Storage.get',
+    type: `(error: Error) => void;`,
+  },
+];

docs/src/pages/[platform]/connected-components/storage/storageimage/react.mdx

@@ -0,0 +1,67 @@
+import { Alert, Image } from '@aws-amplify/ui-react';
+
+import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
+import { Example, ExampleCode } from '@/components/Example';
+import { Fragment } from '@/components/Fragment';
+import { AppDirectoryAlert } from '@/components/AppDirectoryAlert';
+import { InstallScripts } from '@/components/InstallScripts';
+import ReactPropsTable from '@/components/propsTable/ReactPropsTable';
+import { STORAGE_IMAGE } from './props';
+import {
+  DefaultStorageImageExample,
+  StorageImageErrorHandlingExample
+} from './examples'
+
+## Basic Usage
+
+<Alert variation="warning" heading="Wait!">
+  Did you follow the [quick start instructions](/connected-components/storage#quick-start) to set up the storage and auth services?
+</Alert>
+
+<Fragment platforms={['react']}>
+  {({ platform }) => import('@/components/AppDirectoryAlert')}
+</Fragment>
+
+To use the StorageImage component, import it into your React application with the included styles. 
+
+<InstallScripts component="storage" />
+
+<ExampleCode>
+```js
+import { StorageImage } from '@aws-amplify/ui-react-storage';
+import '@aws-amplify/ui-react/styles.css';
+```
+</ExampleCode>
+
+At a minimum you must include the `alt`, `imgKey` and `accessLevel` props. `accessLevel` refers to the [Amplify Storage access level](https://docs.amplify.aws/lib/storage/configureaccess/q/platform/js/), which is `'public' | 'private' | 'protected'`.
+
+<Example>
+  <Image alt='cat' src='/cats/1.jpg' width="400px" height="400px" />
+  <ExampleCode>
+    ```jsx file=./examples/DefaultStorageImageExample.tsx
+    ```
+  </ExampleCode>
+</Example>
+
+## Props
+
+<ReactPropsTable props={STORAGE_IMAGE} />
+
+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.
+
+<Example>
+ <Image alt='fallback cat' src='/cats/2.jpg' width="400px" height="400px" />
+  <ExampleCode>
+    ```jsx file=./examples/StorageImageErrorHandlingExample.tsx
+    ```
+  </ExampleCode>
+</Example>
+
+## Customization
+
+### Target Classes
+<ComponentStyleDisplay componentName="StorageImage" />

packages/react/src/primitives/shared/constants.ts

@@ -551,6 +551,7 @@ export const ComponentClassObject: ComponentClassNameItems = {
   StorageImage: {
     className: ComponentClassName.StorageImage,
     components: ['StorageImage'],
+    description: 'Class applied to the img tag',
   },
   StorageManager: {
     className: ComponentClassName.StorageManager,