How can I show Base64 image in a server-side DataTable?

Question

This is my HTML for server side data to load the data into the table of the data get data from controller

<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 Request go to the mvc controller and get the list was load to model but not show my datatable.

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));
  }
});

};

Answer 1

You should use render property to display images;

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));
  }
});