{"id":1795,"date":"2024-03-07T09:45:39","date_gmt":"2024-03-07T09:45:39","guid":{"rendered":"https:\/\/www.devopssupport.in\/blog\/?p=1795"},"modified":"2024-03-21T06:42:33","modified_gmt":"2024-03-21T06:42:33","slug":"how-to-show-images-on-blade-page-through-ajax","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/how-to-show-images-on-blade-page-through-ajax\/","title":{"rendered":"How to show images on blade page through Ajax"},"content":{"rendered":"\n<p>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&#8217;s define the HTML structure where the images will be displayed. We&#8217;ll use a container with a unique ID to target it in our AJAX request.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\">\r\n    &lt;div id=\"getImageShow\" class=\"col-12\">\r\n        &lt;!-- Images will be displayed here -->\r\n    &lt;\/div>\r\n&lt;\/div>\r\n<\/code><\/pre>\n\n\n\n<p>Implementing AJAX Request in Laravel: Next, we&#8217;ll implement an AJAX request to fetch images from the server and dynamically populate the designated container in the Blade page. We&#8217;ll utilize jQuery for this purpose.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\r\n    $(document).ready(function() {\r\n        $.ajax({\r\n            type: \"GET\",\r\n            url: \"{{ route('get-images') }}\", \/\/ Replace with your route endpoint\r\n            success: function(response) {\r\n                $('#getImageShow').html(''); \/\/ Clear existing content\r\n                if (response.data &amp;&amp; response.data.length > 0) {\r\n                    $.each(response.data, function (index, image) {\r\n                        var imageUrl = \"{{ asset('storage\/quote_request_files\/') }}\" + '\/' + image.p_email + '\/' + image.filename;\r\n                        if (image.mime.includes(\"image\")) {\r\n                            $('#getImageShow').append('&lt;div class=\"col-lg-4\" style=\"width:8em; height:12em;\">&lt;img src=\"' + imageUrl + '\" alt=\"Image\">&lt;\/div>');\r\n                        }\r\n                    });\r\n                }\r\n            },\r\n            error: function(xhr, status, error) {\r\n                console.error(xhr.responseText);\r\n            }\r\n        });\r\n    });\r\n&lt;\/script>\r<\/code><\/pre>\n\n\n\n<p>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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Route::get('\/get-images', 'ImageController@getImages')->name('get-images');\r<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ ImageController.php\r\n\r\nuse App\\Models\\Image;\r\nuse Illuminate\\Http\\Request;\r\n\r\nclass ImageController extends Controller\r\n{\r\n    public function getImages(Request $request)\r\n    {\r\n        $images = Image::all(); \/\/ Fetch images from the database or storage\r\n\r\n        return response()->json(&#91;'data' => $images]);\r\n    }\r\n}\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230; <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[1196,1264,1262,1263,1260,79,42,1266,1265,1261],"class_list":["post-1795","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-ajax","tag-backend","tag-blade-templates","tag-frontend","tag-image-loading","tag-jquery","tag-laravel","tag-optimization","tag-user-experience-2","tag-web-development-4"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/comments?post=1795"}],"version-history":[{"count":1,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1795\/revisions"}],"predecessor-version":[{"id":1814,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1795\/revisions\/1814"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=1795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=1795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=1795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}