Laravel: Add image src dynamically using JavaScript:
Add image SRC Dynamically in Laravel: many people have faced such an error to set image source path in JavaScript. This tutorial is helpful for them, those who add the image source path dynamically using simple JavaScript. I must help you to solve this problem follow me.
Normally you can set the src attribute in an img tag anywhere in the page to call the img tag ID name in your Laravel Blade template. Just like-:
Example:
<script type="text/javascript"> document.getElementById('ID_name').src="{{URL::asset('assets/upload_images/')}}"; </script>
In this tutorial, I will show you to add image path dynamically in a modal on your web page using javaScript, when you click a button. While page table data display by a loop and have an update button for update results from MySQL table. When clicking update button then the image will be shown dynamically in a modal popup using JavaScript so, you need to add image source in JavaScript.
Here I will display a table, where data will be fetched by a loop and retrieve data from the database and add an update button and define an onClick function name and give the ID value in the OnClick function name. When you click the button, it will open in a modal popup so, I will define data-toggle=”modal” data-target=”#myModal”. Just like:
Table:
<table class="table table-bordered"> <thead> <tr> <th>Image</th> <th>Edit </th> </tr> @foreach($get_data as $val) <tr> <td><img src="{{URL::asset('assets/upload_images/')}}/{{$val->image_file}}" alt="Image" /></td> <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-imagefile="{{$gval->image_file}}" onclick="edit_data({{$gval->id}})">Edit</button></td> </tr> @endforeach </tbody> </table>
Now show image value and image source path dynamically in JavaScript:
Script:
<script type="text/javascript"> function edit_data(id){ var imag=$('#eid'+id).data('imagefile'); var image_path="{{URL::asset('assets/upload_images/')}}/"; document.getElementById('view_image').src=image_path+imag; // ** #view_image is the modal img tag Id Name // } </script>
Display image using base URL in Laravel 5: Click Here
Here display an image file in an image tag on your web page using Laravel blade template
Good…top tutor, top post.
you send me in twitter@patricklimatdev my linkedin is: linkedin.com/in/patricklima12 facebook: facebook.com/patricklimatidev