how to pass Image "src" data(with folder address) Bootstrap modal? - laravel

Question

This is my Modal link
<div class="blog-content">
<button type="button" class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-blog_id="{{$item->id}}" data-blog_title="{{$item->title}}" data-blog_content="{{$item->content}}" data-blog_image="{{$item->image}}" data-toggle="modal" data-target="#exampleModalScrollable">Read More</button>
</div>
This Is my Modal
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header"> </div>
<div class="modal-body">
<h5 class="modal-title py-3 text-center" id="title" name="title" style="font-family: 'Bitter', serif;"></h5>
<img class="card-img-top rounded-0 pb-2" name="image" src="" alt="no image">
<p class="text-justify" id="content" name="content" style="font-family: 'Poppins', sans-serif;">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This my My Bootstrap modal js from where i trying to set the address of image "src".
is this the correct way of sending the "src" because i have stored the photo in this directory " public/storage/blog/images/"
$('#exampleModalScrollable').on('show.bs.modal',function(event){
var button= $(event.relatedTarget)
var title= button.data('blog_title')
var content=button.data('blog_content')
var image=button.data('blog_image')
var blog_id=button.data('blog_id')
var modal= $(this)
//modal.find('.modal-title').text('Edit Blog');
modal.find('.modal-body #title').text(title);
modal.find('.modal-body #content').text(content);
modal.find('.modal-body #data-image').attr("src", "{{asset('public/storage/blog/images/"+ $(this).data(image) + "')}}");
modal.find('.modal-body #blog_id').val(blog_id);
})

Answer 1

I'd pass the img url as data attribute:
<div class="blog-content">
<button data-img-src="{{ asset('/storage/blog/images/' . $this->image) }}"></button>
</div>
And in javascript, access it with $(this).data('img-src')
modal.find('.modal-body #data-image').attr("src", $(this).data('img-src'))