how to show image in yajra datatable column , lara

问题:

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

回答1:

If you are use datatable 7.0

Then you can use rawColumns

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);

回答2:

You didn't close {{ in src attribute, try this :

->addColumn('product_brand_logo', function ($product_brand) { 
       $url=asset("uploads/image/$product_brand->image"); 
       return '<img src='.$url.' border="0" width="40" class="img-rounded" align="center" />'; 
});

回答3:

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

回答4:

I had almost the same problem... and it was solved with the following code in my UserController.

In my example, I don´t save the image in the DB, only the name of the image to access with the image name stored in my project...

Nice.. it works

->addColumn('image', function ($user) { $url=asset("uploads/image/$user->avatar"); return '<img src='.$url.' border="0" width="40" class="img-rounded" align="center" />'; });