在数据表上显示图像

Posted 2023-03-14

【中文标题】在数据表上显示图像

【英文标题】：Displaying image on Datatable

【发布时间】：2015-03-25 00:26:08

【问题描述】：

我正在使用服务器端处理读取数据库表并将记录转换为Json文件，并将其传递给数据库表以显示数据。

读取数据库并将其转换为json：

代码：

 Route::get('banner/list/banners/json/id', function ()
   
      $banner = DB::table('banner_creatives')->where('Id','=','53')->get();

      $recordsTotal = count($banner);

      $data['draw'] = 1;
      $data['recordsTotal'] = $recordsTotal;
      $data['recordsFiltered'] = $recordsTotal;

      $data['data'] = $banner;

      return Response::json($data);
   );

Json 输出：

  "draw":1,"recordsTotal":1,"recordsFiltered":1,"data":["id":1,"bId":26,"cId":53,"bName":"32_32_53.jpeg","storageType":"url","width":32,"height":32,"weight":1,"imageURL":"localhost:8000\\\/banner\\\/view\\\/32_32_53.jpeg","clickURL":"","created_at":"2015-01-26 12:32:28","updated_at":"2015-01-26 12:32:28","deleted_at":null]

正如你在这个 json 中看到的，我有想要在桌子上显示的图像 Url。

javascript 代码：

   $(document).ready(function() 
    var table = $('#banner').DataTable( 
    "processing": true,
    "serverSide": false,
    "ajax": "banners/json/53",
    "columns": [
         "data": "id" ,
         "data": "bannerId" ,
         "data": "campaignId" ,
         "data": "bannerName" ,
         "data": "width" ,
         "data": "height" ,
         "data": "imageUrl" 
    );
 );

数据表代码：

 <table id="banner" class="display table table-striped table-bordered table-hover dataTable no-footer" cellspacing="0" >
                        <thead>
                            <tr>
                                <th>id</th>
                                <th>Banner Id</th>
                                <th>Campaign Id</th>
                                <th>Banner Name</th>
                                <th>Width</th>
                                <th>Height</th>
                                <th>Image/Banner</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>id</th>
                                <th>Banner Id</th>
                                <th>Campaign Id</th>
                                <th>Banner Name</th>
                                <th>Width</th>
                                <th>Height</th>
                                <th>Image/Banner</th>
                            </tr>
                        </tfoot>
                    </table>

在最后一列显示图像 URL 但不是我想要的，如果可能的话，我想使用 URL 在数据表上显示通常的图像。

【参考方案1】：

您可以使用columns.render 选项指定可以修改列中呈现的数据的回调函数。

回调函数采用三个参数（自 1.10.1 以来四个）。第一个参数是单元格的原始数据（来自 db 的数据），第二个参数是调用类型（过滤器、显示、类型或排序），第三个参数是行的完整数据源。该函数应返回应在单元格中呈现的字符串。

在您的列定义中，将render 选项添加到您的imageUrl 列定义中：

    "data": "imageUrl",
    "render": function(data, type, row) 
        return '<img src="'+data+'" />';
    

找到有关渲染选项的文档here。

【讨论】：

我用我的代码 "columns": [ "data": "profile_pic", "render": function (data, type, full, meta) return ''; ，它对我来说非常有效。从我这边投票

【参考方案2】：

这是我的解决方案，希望对某人有所帮助。

 
      'targets': [15,16],
      'searchable': false,
      'orderable':false,
      'render': function (data, type, full, meta) 
      return '<img src="'+data+'" style="height:100px;width:100px;"/>';
                        
  ,

【参考方案3】：

"columnDefs": [
            
                // The `data` parameter refers to the data for the cell (defined by the
                // `data` option, which defaults to the column being worked with, in
                // this case `data: 0`.
                "render": function ( data, type, row ) 
                    return '<img src="'+data+'" style="width=300px;height=300px;" />';
                ,
                "targets": 1 // column index 
             

        ]