HOW TO SHOW IMAGE IN YAJRA DATATABLE COLUMN [SOLUTION]

I have a table where I need to show title, image and option. I have already made a datatable jquery and called the data.  My table is as below.

<table class="table">
     <thead>
                                                <tr>
                                                    <th>#</th>
                                                  <th>Title</th>
                                                    <th>Image</th>
                                                    <th>Option</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>

And my jquery to send data to controller is as follow.

<script type="text/javascript">
$(document).ready(function() {
   $('.table').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "{{ route('slidertable.getposts') }}",
        "columns": [
              {data: 'title', name: 'title'},
            {data: 'image', name: 'image',
      },
       {data:'action',orderable:false}
        ]
    });
});
</script>

And controller looks like this

public function getPosts()
    {
        $data = Slider::all();
        return Datatables::of($data)
        ->addColumn('action', function($row) {
            return '<div class="row text-center">
    <div class="col-sm-6">
             <a href="slider/'. $row->id .'/edit">
             <i class="fa fa-edit" class="form-inline"></i>
        </a>
    </div>
    <div class="col-sm-6">
        <form  action="/slider/'.$row->id.'" method="POST" class="form-inline">'.csrf_field().'
        <input type="hidden" name="_method" value="DELETE">   
    <button type="submit" class="fa fa-trash" onclick="return confirm(\'Are you sure?\')"></button>
</form>
    </div>
</div>';
        })




            ->make(true);

    }

And The Route is as follow

Route::get('slidertable/getposts', ['as'=>'slidertable.getposts','uses'=>'SliderController@getPosts']);

My output looks this

Instead of the image name I like to display image of its folder.

SOLUTION

There are two method for this solution one is to render by ajax. Other is to add a new column in the controller

Solution 1

I added a code in the image of the jquery. And the code is like this

{data: 'image', name: 'image',"render": function (data, type, full, meta) {
        return "<img src=\"/images/slider/" + data + "\" height=\"80px\"/>"}

The whole code looks like this

$('.table').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "{{ route('slidertable.getposts') }}",
        "columns": [
                      {data: 'title', name: 'title'},
            {data: 'image', name: 'image',"render": function (data, type, full, meta) {
        return "<img src=\"/images/slider/" + data + "\" height=\"80px\"/>"}
      },
            {data:'action',orderable:false}
        ]
    });

Solution 2

In this method I deleted the image data from the jquery and put this code in the controller

addColumn('image', function ($row) {             
$url= asset('images/slider/'.$row->image);            
return '<img src="'.$url.'" border="0" width="40" class="img-rounded" align="center" />';       
 })
rawColumns(['image', 'action'])->make(true);

At last the final result looked like this