Question

我在MVC中使用Jquery Datatables，并希望在其中显示Image。我知道可以使用以下代码从数据库中检索图像

@{
    string imageBase64 = Convert.ToBase64String(Model.Content);
    string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);
}

但不知道如何使用数据表执行相同操作。我的数据表是

function GetEmployeesData() {
            $.ajax({
                cache: false,
                url: '@Url.Action("GetEmployeesData", "Staff")',
                type: 'GET',
                datatype: 'json',
                success: function (data) {
                    $('#employeedatatable').dataTable({
                        data: data,
                        columns: [
                                    {
                                        'data': 'tbl_StaffImage', "render": function (data) {
                                            return '<img src="tbl_StaffImage" style="height:100px;width:100px;"/>';

                                        }

                                    },

                                    { 'data': 'Name' },

                        ]
                    });


                }
            });

        }

Answer 1

如果要将图像作为byte[]存储在数据库中，则在将其发送到数据表之前将其转换为base64字符串。

，如果您已经将图像作为base64字符串存储在数据库中，则数据表中的tbl_StaffImage数据应如下所示：

{
    data: "tbl_StaffImage", name: "tbl_StaffImage",
    render: function (data, type, row, meta) {
        var imgsrc = 'data:image/png;base64,' + data; // here data should be in base64 string
        return '<img class="img-responsive" src="' + imgsrc +'" alt="tbl_StaffImage" height="100px" width="100px">';
    }
},

Answer 2

尝试使用columns.render函数创建自定义函数。然后使用字符串返回图像的正确表示。

$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "" ,render: getImg },
            { title: "" },
            { title: "" }
        ]
    } );
    });

    function getImg(data, type, full, meta) {
       //
       return '<img  src="your image path(imgsrc )" />';
    }

在数据库中的jQuery DataTable中显示图像

2 个答案: