Adding Image using image path in datatable

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

<title>WTC Listtitle>
<div class="EasyViewHeader">WTC Listdiv>
<div class="EasyViewDiv">
<div class="form-group">
<button title="Add WTC" data-toggle="tooltip" class="button button3" onclick="location.href='@Url.Action("CreateWTC", "WTC")';return false;">
<span class="fa fa-plus" />
button>
div>
<div class="table-responsive">
<table style="width:100%" id="mytable" class="table table-bordered">
<thead>
<tr>
<th>
Update Date
th>
<th>
PIPE NO
th>
<th>
Order ID
th>
<th>
PhotoID
th>
<th>
EmpID
th>
<th>
Status
th>
<th>
Coupon
th>
<th>
Shots
th>
<th>
Segments
th>
<th>
Action
th>
tr>
thead>
table>
div>
div>
<link href="~/DatatableBS/datatables.min.css" rel="stylesheet" />
<script src="~/DatatableBS/datatables.min.js">script>
<link href="~/Content/TablesStyle.css" rel="stylesheet" />
<script src="~/DatatableBS/datetime-moment.js">script>
<script src="~/DatatableBS/moment.min.js">script>
<script>
$(document).ready(function () {
$('#mytable').dataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"order": [[0, "desc"]],
"orderMulti": false, // for disable multiple column at once
"language": {
processing: "Please Wait........"
},
"ajax": {
"url": "@Url.Action("LoadData", "RTEntry")",
//"url":"Easyapplocal/RTEntry/LoadRTList",
"type": "POST",
"datatype":"json"
},
"columns": [
{
"data": "UpdateDate", "name": "UpdateDate", "autowidth": true,
"render": function (value) {
if (value === null) return "";
return moment(value).format('DD/MM/YYYY');
}
},
{ "data": "PIPENO", "name": "PIPENO", "autowidth": true },
{ "data": "OrderID", "name": "OrderID", "autowidth": true },
{
"data": "PhotoID",
"render": function (url, type, full) {
return '<img src="'+ url + '" class="img-circle"/>';
}
},
{ "data": "EmpID", "name": "EmpID", "autowidth": true },
{ "data": "Status", "name": "Status", "autowidth": true },
{ "data": "ISCoupon", "name": "ISCoupon", "autowidth": true },
{ "data": "TotalShots", "name": "TotalShots", "autowidth": true },
{
"data": "Flex1", "name": "Flex1", "searchable": false,
"sortable": false, "autowidth": true
},
{
"data": "Action", "name": "Action", "searchable": false,
"sortable": false,
"render": function (data, type, full, meta)
{
return '<a class="EasyUIBtn EasyUIBtnDtl" href="@Url.Action("DetailsWTC", "WTC")' + "/" + full.WTCID + ' "target="_self" ><span class="fa fa-id-card-o">span>a>';
}
}
]
});
});
script>

How can I display image in datatable

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Joginder Banger6y ago
Accepted answer
As your question and after seen your posted data, I beleive your image page path making wrong. Please try inspect and change the path runtime, when your path is correct image display. so try runtime change the path of image.

let me know what i can do for you.

Thanks
JSB
0
Raju Fodse6y ago
Thank you sir! it working
0
Raju Fodse6y ago
Sir, I am not understanding please explain your solution
0
Joginder Banger6y ago
please hit and try below change
Just change in database table
~/Images/EmpPic/Jaishankar200023897.PNG to ../Images/EmpPic/Jaishankar200023897.PNG
or
~/Images/EmpPic/Jaishankar200023897.PNG to ./Images/EmpPic/Jaishankar200023897.PNG

plz try above line.
0
Raju Fodse6y ago
Below is my Datatable and Directory Structure. This works fine in normal datatable but not works in server side datatable. Why should I get this error?

0