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

here is tutorial https://www.youtube.com/watch?v=2pPvD7xwCq4&feature=youtu.be — Shailesh Ladumor, Apr 25 '20 at 15:16

score 10 · Answer 1 · edited May 04 '21 at 10:00

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

score 4 · Answer 2 · answered Jan 19 '18 at 13:48

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

Maraboc · Answer 3 · 2017-08-29T21:10:39.670

3

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" />'; 
});

edited Aug 29 '17 at 21:10

answered Aug 11 '17 at 07:59

Maraboc

10,550
3
37
48

syntax error, unexpected 'upload' (T_STRING), expecting ';' – user7647067 Aug 11 '17 at 08:13
Try the updated answer, there is no need to use blade syntax :) – Maraboc Aug 11 '17 at 08:22
i try but i got error from datatable `DataTables warning: table id=users-table - Ajax error. For more information about this error, please see http://datatables.net/tn/7` – user7647067 Aug 11 '17 at 08:35
Ithink it's `$product_brand->image` not `$img->image` ?? – Maraboc Aug 11 '17 at 08:39
@user7647067 what do you think ?? – Maraboc Aug 11 '17 at 09:00
this code i am adding in my datatable for showing recored, i am using yajra datatables 6.0 – user7647067 Aug 11 '17 at 09:28
try this `->addColumn('product_brand_logo', function ($product_brand) { return ''; ` – Maraboc Aug 11 '17 at 09:32
same error i got ` DataTables warning: table id=users-table - Ajax error. For more information about this error, please see http://datatables.net/tn/7` – user7647067 Aug 11 '17 at 10:50
1

problem solved this is my code i hope it help any one else `->addColumn('product_brand_logo', function ($product_brand) { $url=asset("uploads/image/$product_brand->image"); return ''; });` – user7647067 Aug 11 '17 at 16:37
I edited my answer with your code to help other people to find it, because lot of them don't see the comments :) – Maraboc Aug 29 '17 at 21:12

score 2 · Answer 4 · edited Oct 21 '18 at 10:26

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" />'; });

score 1 · Answer 5 · answered May 24 '22 at 05:12

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

Just call"->rawColumns(['product_brand_logo', 'action'])" after edit/add column

score 0 · Answer 6 · answered Mar 28 '20 at 15:07

You can do this by the following code

          {data: 'logo', name: 'logo',
            render: function( data, type, full, meta ) {
                return "<img src=\"/images/clients/" + data + "\" height=\"150\" 
                alt='No Image'/>";
            }
            }

score 0 · Answer 7 · answered Aug 12 '21 at 13:01

0

Use This will do the trick

->escapeColumns('product_brand_logo')

answered Aug 12 '21 at 13:01

Idhi Atmojo

1

score 0 · Answer 8 · answered May 18 '23 at 07:35

0

the best way to show image tag on data table

->addColumn('logo_url', function($data) {
   return '<img src="'.$data->logo_url.'" width="95px"/>';
})

answered May 18 '23 at 07:35

Bhargav Raviya

84
6

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

8 Answers8

Linked