Laravel应用中如何用jQuery Datatables显示每行对应数据库图片？

MySQL数据库中存储了哈希格式的图片名称，实际图片保存在Laravel应用的storage文件夹中，文件名与数据库记录一致。希望在jQuery Datatables的每行中展示对应图片，但目前所有行都显示同一张固定图片，相关代码如下：

原前端代码 #

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},
            ]
        });

原控制器代码 #

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

要实现每行显示对应独立图片，只需修改前端的render逻辑，利用返回的data参数（即当前行的image字段值）拼接图片路径：

修改后的前端代码 #

// 先在Blade模板中定义图片基础路径
const imageBaseUrl = "{{ URL::asset('storage/project_images/') }}/";

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) {        
                    // 用当前行的image字段值替换固定图片名
                    const fullImageUrl = imageBaseUrl + data;
                    return `<a href="${fullImageUrl}"><img src="${fullImageUrl}" width="50px"/></a>`;
                    }},
                {data: 'video', name: 'video'},
                {data: 'year', name: 'year'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });

控制器注意事项 #

确保Project模型的image字段被正确包含在返回数据中：

• 若模型中设置了$hidden属性，确认image不在隐藏列表内；
• 也可以主动指定查询字段，比如将$data = Project::latest()->get();改为$data = Project::latest()->select('id', 'name', 'type', 'description', 'stack', 'image', 'video', 'year')->get();，避免遗漏字段。

内容的提问来源于stack exchange，提问作者Chizo