如何在数据表中显示图像？答案

【问题标题】：How to display image in datatable?如何在数据表中显示图像？
【发布时间】：2017-09-05 21:16:51
【问题描述】：

我想在我的数据表中显示一个图像。要在数据表中显示的数据是一个json数组，如下所示：

data : [["1", "John","image1.jpg"], ["2", "Jim", "image2.jpg"]]

所以在我的数据库中，我只有图像的名称，我不知道如何显示图像本身。

【问题讨论】：

嗨，你可以参考这个datatables.net/forums/discussion/32924/…和这个jsfiddle.net/glenderson/yg1w6gen/1

标签： jquery json datatables

【解决方案1】：

以前有人问过，但不是用简单的数组datasrc。使用columnDefs定位图片的索引，使用render构造<img>标签：

var table = $('#example').DataTable({
  data: data,
  columnDefs: [
    { targets: 2,
      render: function(data) {
        return '<img src="'+data+'">'
      }
    }   
  ]
})

http://jsfiddle.net/0f9Ljfjr/965/另见

View pictures or images inside Jquery DataTable
Jquery datatables display image in one of the columns
Displaying image on Datatable

【讨论】：

【解决方案2】：

我的一个经验是如何打印，然后我发现 stripHtml: false 如下

    "buttons": [
        {
            extend: 'print',
            title: 'nono nonono',
            exportOptions: {
                columns: ':visible',
                stripHtml: false,
            },
            text: '<i class="fa fa-print"></i> Print',
            customize: function (win) {
                $(win.document.body)
                    .css('font-size', '10pt')
                    .prepend(
                        '<img src="" style="position:absolute; top:0; left:0;" />'
                    );

                $(win.document.body).find('table')
                    .addClass('compact')
                    .css('font-size', 'inherit');
            }
        },
    ]

【讨论】：