Display images from Database in Datatables using jQuery for a Laravel app

Question

I have a table in Mysql database that stores hashed image names. The actual image is stored in the storage folder of the Laravel application with the same name as in the database. I want to display these images alongside other columns in the database for each item in the jQuery Datatable.

I was able to display a single image for all the Datatable rows with the code below.

var table = $('.pdata-tables').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('project.index') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                {data: 'name', name: 'name'},
                {data: 'type', name: 'type'},
                {data: 'description', name: 'description'},
                {data: 'stack', name: 'stack'},
                {data: 'image', name: 'image',
                    "render": function (data) {        
                    return '<a href="{{ URL::asset("storage/project_images/2AA3BIA4wSk4DAeB8N8AP1MdXXhj5kFVtO27jKui.jpg") }}"><img src=" {{ URL::asset("storage/project_images/2AA3BIA4wSk4DAeB8N8AP1MdXXhj5kFVtO27jKui.jpg") }} " width="50px"/><a>' }},
                {data: 'video', name: 'video'},
                {data: 'year', name: 'year'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });

Controller function

 public function index(Request $request)
    {
        if ($request->ajax()) {
  
            $data = Project::latest()->get();
  
            return Datatables::of($data)
                    ->addIndexColumn()
                  ->addColumn('action', function($row){

                    $btn = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Edit" class="edit m-1 btn btn-primary btn-sm editProject"><i class="p-1 zmdi zmdi-edit"></i></a>';
       
                    $btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Delete" class="m-1 btn btn-danger btn-sm deleteProject"><i class="p-1 zmdi zmdi-delete"></i></a>';

                     return $btn;
            
                  })
                  ->rawColumns(['action'])
                  ->make(true);
        }
        
        return view('admin_pages.project', ['projects' => $this->projects, 'clients' => $this->clients]);
    }

How can I display individual images for each row?

Answer 1

I got the solution with suggestion in the comment.

the code now looks like this.

var table = $('.pdata-tables').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('project.index') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                {data: 'name', name: 'name'},
                {data: 'type', name: 'type'},
                {data: 'description', name: 'description'},
                {data: 'stack', name: 'stack'},
                {data: 'image', name: 'image',
                    "render": function (data) {        
                    return '<a href="{{ URL::asset("storage/project_images/' + data + '") }}"><img src=" {{ URL::asset("storage/project_images/' + data + '") }} " width="50px"/><a>' }},
                {data: 'video', name: 'video'},
                {data: 'year', name: 'year'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });