如何在服务器端的数据表中显示Base64图像？

Question

这是我用于服务器端数据的HTML，将数据加载到数据表中并从控制器获取数据。

<script type="text/template" id="tablescript">
  <td><%=Name%></td>
  <td><%=PhoneNumber%></td>
  <td><%=CNIC%></td>
  <td><%=So%></td>
  <td><%=Thumb%></td>
  <td><%=Image%></td>
  <td><%=NomineeImage%></td>
  <td>
    <i class="fa fa-pencil-square-o" aria-hidden="true" onclick="editMember('<%= Id%>')" style="cursor:pointer;font-size: 20px;"></i>
    <span class="fa fa-trash" aria-hidden="true" style="cursor:pointer;color:red;font-size: 20px;" onclick="deleteMember('<%= Id%>')"></span>
    <span class="fa fa-ban" aria-hidden="true" style="cursor:pointer;color:red;font-size: 20px;" onclick="blockMember('<%= Id%>')"></span>
    <span class="fa fa-check" aria-hidden="true" style="cursor:pointer;color:green;font-size: 20px;" onclick="activeMember('<%= Id%>')"></span>
  </td>
</script>

<table class="table table-hover table-bordered table-striped" id="tblloaddata"></table>

Ajax请求发送到mvc控制器并获取列表，加载到模型但不能显示在我的数据表中。

var table;
var loadtable = function () {
var getUrl = $("#hidLoadMembersUrl").val();
var tmpl = _.template($("#tablescript").html());

table = $("#tblloaddata").DataTable({
  "processing": true,
  "serverSide": true,
  "ajax": {
    url: getUrl,
    type: "POST"
  },
  "columns": [
    { "data": "Name", "title": "Name" },
    { "data": "PhoneNumber", "title": "PhoneNumber" },
    { "data": "CNIC", "title": "CNIC" },
    { "data": "So", "title": "SoDoWoName" },
    { "data": "Thumb", "title": "Thumb" },
    { "data": "Image", "title": "Image" },
    { "data": "NomineeImage", "title": "NomineeImage" },
    { "data": null, "title": "Action", "orderable": "false" },
  ],
  "rowCallback": function (row, data) {
    console.log(data);
    $(row).html(tmpl(data));
  }
});

};

- Hamza Shafiq

Answer 1

您应该使用render属性来显示图片；

table = $("#tblloaddata").DataTable({
  "processing": true,
  "serverSide": true,
  "ajax": {
    url: getUrl,
    type: "POST"
  },
  "columns": [
    { "data": "Name", "title": "Name" },
    { "data": "PhoneNumber", "title": "PhoneNumber" },
    { "data": "CNIC", "title": "CNIC" },
    { "data": "So", "title": "SoDoWoName" },
    { "data": "Thumb", "title": "Thumb" },
    { "data": "Image", "title": "Image", render : function (data, type, full, meta) 
                                         { return '<img src="'+data.Image+'"/>'; }
    },
    { "data": "NomineeImage", "title": "NomineeImage" },
    { "data": null, "title": "Action", "orderable": "false" },
  ],
  "rowCallback": function (row, data) {
    console.log(data);
    $(row).html(tmpl(data));
  }
});

- lucky

---

仍然无法工作，无法加载数据和图像。 - Hamza Shafiq

当我加载没有base64图像数据时，数据可以完美加载而不出现错误。但是当我将base64字符串加载到列表中时，数据无法显示。 - Hamza Shafiq

你有查看错误浏览器控制台吗？你应该进行调试。使用“render”是执行它最有效的方法。 - lucky

你可能需要在base64字符串的开头添加正确的MIME类型...它应该以此开始。请查看：http://jsfiddle.net/hpP45/ - annoyingmouse