在数据库中的 jquery DataTable 中显示图像答案

【问题标题】：Display Image in jquery DataTable from Database在数据库中的 jquery DataTable 中显示图像
【发布时间】：2018-09-25 10:52:01
【问题描述】：

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

@{
    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' },

                        ]
                    });


                }
            });

        }

【问题讨论】：

标签： jquery asp.net-mvc datatables

【解决方案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">';
    }
},

【讨论】：

已经这样做了，第二个“赞成票”就是我昨天所做的。 :-)

【解决方案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 )" />';
    }

【讨论】：

但我没有保存图像路径。我正在保存 varbinary 图像