how to show image in yajra datatable column , laravel5.3

Question

i am adding a column in datatable for image like this :

->addColumn('product_brand_logo', function ($product_brand) {
    return '<img src="{{ URL::to('upload/image')'.$img->image.'" border="0" width="40" class="img-rounded" align="center" />';

its not working the output in inspect

| {{ URL::to('upload/image')imagename.png}}|

using laravel 5.3, yajra datatable 6.0

Answer 1

If you are using datatable 7.0

Then you can use rawColumns

In cases where you want to render an html content, please use rawColumns api

return DataTables::of($artists)->addColumn('image', function ($artist) {
    $url= asset('storage/'.$artist->image);
    return '<img src="'.$url.'" border="0" width="40" class="img-rounded" align="center" />';
})->addColumn('action', function ($artist) {
    return '<a href="/admin/artist/'.$artist->id.'/edit" class="btn btn-xs btn-primary"><i class="glyphicon glyphicon-edit"></i> Edit</a>
    <a href="admin/artist/"'.$artist->id .'" class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-trash"></i> Delete</a>';
})->rawColumns(['image', 'action'])->make(true);

Answer 2

To Display image in DataTable, we need to use render function on the column to display images. You can define your own render function. In our case, we want to render an image, something like following,

render: function( data, type, full, meta ) {
            return "<img src=\"/path/" + data + "\" height=\"50\"/>";
        }

overall look like this -

<script>
    $( function() {
        $( '#users-table' ).DataTable( {
            processing: true,
            serverSide: true,
            ajax: "{!! route('route_name') !!}",
            columns: [
                { data: 'id', name: 'id' },
                { data: 'avatar', name: 'avatar',
                    render: function( data, type, full, meta ) {
                        return "<img src=\"/path/" + data + "\" height=\"50\"/>";
                    }
                },
                { data: 'email', name: 'email' },
            ]
        } );
    } );
</script>

Hope this helps