import all0 from "/src/fragments/ui/web/installation.mdx";

<Fragments fragments={{all: all0}} />

## Usage

<FilterContent framework="react">

```jsx
import React from "react";
import { Amplify } from "aws-amplify";
import { AmplifyS3Image } from "@aws-amplify/ui-react";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

const App = () => <AmplifyS3Image imgKey="example.png" />;
```

</FilterContent>

<FilterContent framework="angular">

import all1 from "/src/fragments/ui/angular/configure-module.mdx";

<Fragments fragments={{all: all1}} />

_app.component.html_

```html
<amplify-s3-image img-key="example.png"></amplify-s3-image>
```
_app.component.html_ (using data binding e.g. filename)
```html
<amplify-s3-image imgKey="{{filename}}"></amplify-s3-image>
```


</FilterContent>

<FilterContent framework="vue">

import all3 from "/src/fragments/ui/vue/configure-app.mdx";

<Fragments fragments={{all: all3}} />

_App.vue_

```html
<template>
  <amplify-s3-image img-key="example.png" />
</template>
```

</FilterContent>

<UiComponentProps tag="amplify-s3-image" propType="attr" useTableHeaders></UiComponentProps>

<UiComponentProps tag="amplify-s3-image" propType="css" useTableHeaders></UiComponentProps>

```css
amplify-s3-image {
  --height: 200px;
  --width: 400px;
}
```

## Use Cases

### Getting files from protected access level

Protected files from S3 bucket can be accessed by anyone other than the owner by using the `identityId` of the owner.

<FilterContent framework="react">

```jsx
const App = () => (
  <AmplifyS3Image
    level="protected"
    imgKey="example.png"
    identityId="us-east-1:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX"
  />
);
```

</FilterContent>

<FilterContent framework="angular">

_app.component.html_

```html
<amplify-s3-image
  level="protected"
  img-key="example.png"
  identity-id="us-east-1:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX"
></amplify-s3-image>
```

</FilterContent>

<FilterContent framework="vue">

_App.vue_

```html
<template>
  <amplify-s3-image
    level="protected"
    img-key="example.png"
    identity-id="us-east-1:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX"
  />
</template>
```

</FilterContent>

## Migration

To migrate from using the `aws-amplify-<framework>` library to the latest `@aws-amplify/ui-<framework>` library use the steps below:

import all4 from "/src/fragments/ui/web/installation-diff.mdx";

<Fragments fragments={{all: all4}} />

### Usage

<FilterContent framework="react">

```diff
- import { S3Image } from 'aws-amplify-react';
+ import { AmplifyS3Image } from '@aws-amplify/ui-react';

const App = () => (

+ <AmplifyS3Image imgKey="example.png" />
- <S3Image imgKey="example.png" />

);
```

</FilterContent>

<FilterContent framework="angular">

import all5 from "/src/fragments/ui/angular/configure-module-diff.mdx";

<Fragments fragments={{all: all5}} />

_app.component.html_

```diff
+ <amplify-s3-image img-key="example.png"></amplify-s3-image>
- <s3-image img-key="example.png"></s3-image>
```

</FilterContent>

<FilterContent framework="vue">

import all7 from "/src/fragments/ui/vue/configure-app-diff.mdx";

<Fragments fragments={{all: all7}} />

_App.vue_

```diff
 <template>
- <s3-image img-key="example.png" />
+ <amplify-s3-image img-key="example.png" />
 </template>
```

</FilterContent>

If you were using `S3Image` with `picker` property enabled, please see the documentation for [`S3ImagePicker`](/ui/storage/s3-image-picker).