I can not return an image file and show it in View using Ajax in ASP

Question

I can not return an image file and show it in View using Ajax in ASP MVC

my ajax code:

DTR.SetUserData = function () {
$.ajax({
url: "/Modules/FetchUserData",
type: "GET",
data: {
username: username
},
dataType: "json",
success: function (data) {
for (var i in data) {
$('#iDNumber').val(data[i].employeeIdNo);
$('#employeeName').val(data[i].employeeName);
$('#employeePosition').val(data[i].positionName);
$('#employeeDepartment').val(data[i].departmentName);
$('#timeIN').val(data[i].inTimeTransLog);
$('#timeOUT').val(data[i].outTimeTransLog);

}
}
});
}

Sachin Singh · Answer

What are you returning, an image file or just its url? For url DTR.SetUserData = function () { $.ajax({ url: "/Modules/FetchUserData" , type: "GET" , data: { username: username }, dataType: "json" , success: function (data) { for (var i in data) { $( '#iDNumber' ).val(data[i].employeeIdNo); $( '#employeeName' ).val(data[i].employeeName); $( '#employeePosition' ).val(data[i].positionName); $( '#employeeDepartment' ).val(data[i].departmentName); $( '#timeIN' ).val(data[i].inTimeTransLog); $( '#timeOUT' ).val(data[i].outTimeTransLog); $( "#img" ).attr( "src" ,data[i].imgUrl); // notice here } } }); } for complete file you need to send another request public ActionResult DownloadPic( int ? id) { string targetFolder = System.Web.HttpContext.Current.Server.MapPath( "~/Image/myImg.jpg" ); byte[] img = System.IO.File.ReadAllBytes(targetFolder); return File(img, "image/jpg" ); } If you are returning like this then you need to make another call.

Muhammad Imran Ansari · Answer

Additional to the first solution: Convert your image into Base64String before return, Like: string targetFolder = System.Web.HttpContext.Current.Server.MapPath("~/Image/myImg.jpg"); return Json(Convert.ToBase64String(targetFolder), JsonRequestBehavior.AllowGet); protected string ConvertPhotoBase64Img(string fileNameandPath) { byte[] byteArray = File.ReadAllBytes(fileNameandPath); string base64 = Convert.ToBase64String(byteArray); return string.Format("data:image/gif;base64,{0}", base64); } Use the following in success: function $("#ItemPreview").attr('src', 'data:image/png;base64,' + data);