AWS Builder Center

Builder Center

How to Store and Serve Images in React using Amazon S3

Learn how to easily store and serve images in a React application using Amazon S3 buckets and CORS configuration.

vikash sharma

Web developer learning AWS, Cloud & DevOps. Interested in building and deploying applications.

Introduction

When building modern web applications with React, managing user media like profile pictures or project assets can quickly consume local storage. Amazon S3 (Simple Storage Service) provides a secure, scalable, and low-cost solution for cloud image storage. In this guide, I will walk through setting up an S3 bucket to store and display images in a React app.

Prerequisites

  • Basic knowledge of React.js.
  • An active AWS Account.
  • Node.js installed on your machine.

Step 1: Create an Amazon S3 Bucket

  1. Open the AWS Management Console and search for S3.
  2. Click Create bucket.
  3. Enter a unique bucket name (e.g., my-react-app-media-storage).
  4. Select your preferred AWS Region.
  5. Keep default settings for now and click Create bucket.

Step 2: Configure Bucket Policies & CORS

To allow your React application to access images stored in S3, configure CORS (Cross-Origin Resource Sharing):
Go to your Bucket Permissions tab and add the following JSON configuration:
1
2
3
4
5
6
7
8
[
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["GET", "PUT", "POST"],
"AllowedOrigins": ["*"],
"ExposeHeaders": []
}
]

Step 3: Fetching Images in React

Once your images are uploaded to S3, you can render them in your React components using the S3 Object URL:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';

const ImageCard = () => {
const imageUrl = "https://my-react-app-media-storage.s3.amazonaws.com/sample-image.jpg";

return (
<div className="card">
<h3>Uploaded Asset</h3>
<img src={imageUrl} alt="S3 Asset" width="300" />
</div>
);
};

export default ImageCard;

Conclusion

Using Amazon S3 with React makes asset management effortless and production-ready. It keeps your app lightweight, fast, and scalable without cluttering your server code.
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article