6

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

2

8 Answers 8

10

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); 
Sign up to request clarification or add additional context in comments.

Comments

4

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

10 Comments

syntax error, unexpected 'upload' (T_STRING), expecting ';'
Try the updated answer, there is no need to use blade syntax :)
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
Ithink it's $product_brand->image not $img->image ??
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 '<img src='.$url.' border="0" width="40" class="img-rounded" align="center" />'; });
|
4

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

Comments

2

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

Comments

1
->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

Comments

0

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

Comments

0

Use This will do the trick

->escapeColumns('product_brand_logo')

Comments

0

the best way to show image tag on data table

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.