I am trying to render image from public folder to the DataTable, where the image information like path are stored in database.
When I hard code the image information, the image is rendered. But when I make it dynamic it does not appear.
I took the reference from Display images from Database in Datatables using jQuery for a Laravel app
but it’s not working for me.
My ajax code,
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('students.index') }}",
columns: [{
data: 'DT_RowIndex',
name: 'DT_RowIndex'
},
{
data: 'name',
name: 'name'
},
{
data: 'image',
name: 'image',
"render": function (data) {
return '<img src="{{ asset("images/' +data+'") }}" />' }
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
]
});
In browser, when I inspect the img tag it shows::
<img src="http://127.0.0.1:8000/images/' +data+'">
When I hard code the image name, it’s showing the image.
{
data: 'image',
name: 'image',
"render": function (data) {
return '<img src="{{ asset("images/9867543cu4R.jpg") }}" />' }
},
How to solve this issue, please help.