Post
Ask Question
Raju Fodse

Raju Fodse

  • 1.9k
  • 235
  • 22k

Adding Image using image path in datatable

Feb 11 2020 11:50 PM
I am using MVC. I want render image in server side datatable. My employee table saves files path of image and i want display that image in datatable. My Datatable working but unable to display image I am getting following error
 
GEThttp://192.168.1.110/easyappnew/RTEntry/~/Images/EmpPic/RupeshKumarSingh200353474.PNG[HTTP/1.1 404 Not Found 88ms]
GEThttp://192.168.1.110/easyappnew/RTEntry/~/Images/EmpPic/Jaishankar200023897.PNG[HTTP/1.1 404 Not Found 66ms]
GEThttp://192.168.1.110/easyappnew/RTEntry/~/Images/EmpPic/RupeshKumarSingh200353474.PNG[HTTP/1.1 404 Not Found 3ms]
GEThttp://192.168.1.110/easyappnew/RTEntry/~/Images/EmpPic/Jaishankar200023897.PNG[HTTP/1.1 404 Not Found 1ms]  
 
 
Following is my View Code
  1. <title>WTC List</title>  
  2.   
  3. <div class="EasyViewHeader">WTC List</div>  
  4. <div class="EasyViewDiv">  
  5.     <div class="form-group">  
  6.         <button title="Add WTC" data-toggle="tooltip" class="button button3" onclick="location.href='@Url.Action("CreateWTC", "WTC")';return false;">  
  7.             <span class="fa fa-plus" />  
  8.         </button>  
  9.     </div>  
  10.     <div class="table-responsive">  
  11.         <table style="width:100%" id="mytable" class="table table-bordered">  
  12.             <thead>  
  13.                 <tr>  
  14.                     <th>  
  15.                         Update Date  
  16.                     </th>  
  17.                     <th>  
  18.                         PIPE NO  
  19.                     </th>  
  20.                     <th>  
  21.                         Order ID  
  22.                     </th>  
  23.                     <th>  
  24.                         PhotoID  
  25.                     </th>  
  26.                     <th>  
  27.                        EmpID  
  28.                     </th>  
  29.                     <th>  
  30.                         Status  
  31.                     </th>  
  32.                     <th>  
  33.                         Coupon  
  34.                     </th>  
  35.                     <th>  
  36.                         Shots  
  37.                     </th>  
  38.                     <th>  
  39.                         Segments  
  40.                     </th>  
  41.                     <th>  
  42.                         Action  
  43.                     </th>  
  44.   
  45.                 </tr>  
  46.             </thead>  
  47.         </table>  
  48.     </div>  
  49. </div>  
  50.   
  51. <link href="~/DatatableBS/datatables.min.css" rel="stylesheet" />  
  52. <script src="~/DatatableBS/datatables.min.js"></script>  
  53. <link href="~/Content/TablesStyle.css" rel="stylesheet" />  
  54. <script src="~/DatatableBS/datetime-moment.js"></script>  
  55. <script src="~/DatatableBS/moment.min.js"></script>  
  56.   
  57. <script>  
  58.     $(document).ready(function () {  
  59.   
  60.         $('#mytable').dataTable({  
  61.             "processing": true, // for show progress bar  
  62.             "serverSide": true, // for process server side  
  63.             "filter": true, // this is for disable filter (search box)  
  64.             "order": [[0, "desc"]],  
  65.             "orderMulti": false, // for disable multiple column at once  
  66.             "language": {  
  67.                 processing: "Please Wait........"  
  68.             },  
  69.             "ajax": {  
  70.                 "url": "@Url.Action("LoadData", "RTEntry")",  
  71.                 //"url":"Easyapplocal/RTEntry/LoadRTList",  
  72.                 "type": "POST",  
  73.                 "datatype":"json"  
  74.   
  75.             },  
  76.             "columns": [  
  77.                 {  
  78.                     "data": "UpdateDate", "name": "UpdateDate", "autowidth": true,  
  79.   
  80.                     "render": function (value) {  
  81.                         if (value === null) return "";  
  82.                         return moment(value).format('DD/MM/YYYY');  
  83.                     }  
  84.                 },  
  85.                 { "data": "PIPENO", "name": "PIPENO", "autowidth": true },  
  86.                 { "data": "OrderID", "name": "OrderID", "autowidth": true },  
  87.                 {  
  88.                     "data": "PhotoID",  
  89.                     "render": function (url, type, full) {  
  90.                         return '<img src="'+ url + '" class="img-circle"/>';  
  91.                     }  
  92.                 },  
  93.                 { "data": "EmpID", "name": "EmpID", "autowidth": true },  
  94.                 { "data": "Status", "name": "Status", "autowidth": true },  
  95.                 { "data": "ISCoupon", "name": "ISCoupon", "autowidth": true },  
  96.                 { "data": "TotalShots", "name": "TotalShots", "autowidth": true },  
  97.                 {  
  98.                     "data": "Flex1", "name": "Flex1", "searchable": false,  
  99.                     "sortable": false, "autowidth": true  
  100.                 },  
  101.                 {  
  102.                     "data": "Action", "name": "Action", "searchable": false,  
  103.                     "sortable": false,  
  104.                     "render": function (data, type, full, meta)  
  105.                     {  
  106.                         return '<a class="EasyUIBtn EasyUIBtnDtl" href="@Url.Action("DetailsWTC", "WTC")' + "/" + full.WTCID + ' "target="_self" ><span class="fa fa-id-card-o"></span></a>';  
  107.                     }  
  108.   
  109.   
  110.                 }  
  111.   
  112.                 ]  
  113.   
  114.             });  
  115.         });  
  116.   
  117.   
  118. </script>  
How can I display image in datatable 

Answers (5)