Displaying Images in ReactJS from Laravel Storage: A Step-by-Step Guide (2026)

This tutorial will guide you through the process of displaying images stored in a Laravel backend within a ReactJS frontend application. Understanding how to serve images from a server-side storage and display them on a client-side application is crucial for developing rich web applications.

Key Takeaways

• Understand the integration between Laravel's storage system and ReactJS.
• Learn how to configure Laravel to serve images via a public URL.
• Implement a ReactJS component to dynamically display images.
• Handle common issues such as CORS and path configurations.

Introduction

In modern web applications, efficiently handling media files is essential. Laravel provides a robust storage API, while ReactJS offers a flexible way to build dynamic user interfaces. Combining these technologies allows you to create an application that can store images on the server and display them dynamically on the client side.

In this tutorial, you will learn how to: set up Laravel to serve images stored in the storage/app/public directory, configure your ReactJS application to fetch and display these images, and ensure that your setup is secure and efficient.

Prerequisites

• Basic knowledge of Laravel (v10.0) and ReactJS (v18.0).
• A Laravel project with images stored in storage/app/public.
• Node.js and npm installed on your machine.
• An existing ReactJS application ready for modification.

Step 1: Configure Laravel to Serve Images

First, ensure that your Laravel application can publicly serve images stored in the storage/app/public directory. Perform the following steps:

1.1 Create a Symlink

Run the following Artisan command to create a symbolic link from public/storage to storage/app/public:

php artisan storage:link

This command allows files stored in storage/app/public to be accessible via the public/storage URL path.

1.2 Verify the Setup

Place an image in the storage/app/public directory and try accessing it via http://localhost:8000/storage/your-image.jpg. Ensure the image loads in your browser.

Step 2: Fetch Image Data from the Database

Assume you have stored image filenames in a MySQL database. Fetch this data using a Laravel API endpoint:

2.1 Create a Controller Method

In your Laravel project, create a method in a controller to retrieve image filenames:

public function getImages() { return response()->json(Image::all()); }

2.2 Set Up the Route

In routes/api.php, define a route for the endpoint:

Route::get('/images', [ImageController::class, 'getImages']);

Step 3: Display Images in ReactJS

Now that your Laravel application can serve images, integrate this with your ReactJS application:

3.1 Fetch Images in ReactJS

In your React component, use fetch to get the image data:

componentDidMount() { fetch('http://localhost:8000/api/images') .then(response => response.json()) .then(data => this.setState({ images: data })); }

3.2 Render Images in JSX

Modify your render method to display the images:

render() { return (  {this.state.images.map((image) => (  ))}  ); }

Common Errors/Troubleshooting

Here are common issues you might encounter and their solutions:

• CORS Errors: Ensure CORS is correctly configured in Laravel using the cors.php config file.
• 404 Errors: Verify the symlink exists and is correctly mapped to the public/storage directory.
• Image Not Loading: Check the URL path and ensure the image exists in the storage/app/public directory.

Conclusion

By following this guide, you've learned how to display images stored in a Laravel backend on a ReactJS frontend. This setup not only enhances the user experience with dynamic content but also leverages the strengths of both Laravel and ReactJS.

Frequently Asked Questions

Why are my images not displaying?

Ensure the symlink is correctly created and the image exists in the specified directory. Check URL paths and permissions.

How do I solve CORS issues?

Configure the CORS settings in Laravel's cors.php file to allow requests from your ReactJS app's domain.

Can I display images stored outside the public directory?

To access images outside the public directory, you can create additional symlinks or use Laravel's routes to serve files directly.

Is it secure to store images in the public directory?

While it's common to store publicly accessible images here, ensure sensitive files are kept secure and not accessible publicly.