AJAX to fetch and display images in a Blade page within a Laravel application, providing a seamless and efficient way to present images to users. Setting Up the HTML Structure: Before we dive into the AJAX implementation, let’s define the HTML structure where the images will be displayed. We’ll use a container with a unique ID to target it in our AJAX request.

<div class="row">
    <div id="getImageShow" class="col-12">
        <!-- Images will be displayed here -->
    </div>
</div>

Implementing AJAX Request in Laravel: Next, we’ll implement an AJAX request to fetch images from the server and dynamically populate the designated container in the Blade page. We’ll utilize jQuery for this purpose.

<script>
    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "{{ route('get-images') }}", // Replace with your route endpoint
            success: function(response) {
                $('#getImageShow').html(''); // Clear existing content
                if (response.data && response.data.length > 0) {
                    $.each(response.data, function (index, image) {
                        var imageUrl = "{{ asset('storage/quote_request_files/') }}" + '/' + image.p_email + '/' + image.filename;
                        if (image.mime.includes("image")) {
                            $('#getImageShow').append('<div class="col-lg-4" style="width:8em; height:12em;"><img src="' + imageUrl + '" alt="Image"></div>');
                        }
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });
</script>

Creating the Route and Controller Method: In your Laravel application, define a route that points to a controller method responsible for fetching the images. Ensure that the controller method returns the image data in JSON format.

Route::get('/get-images', 'ImageController@getImages')->name('get-images');

// ImageController.php

use App\Models\Image;
use Illuminate\Http\Request;

class ImageController extends Controller
{
    public function getImages(Request $request)
    {
        $images = Image::all(); // Fetch images from the database or storage

        return response()->json(['data' => $images]);
    }
}