This is my controller.
ImagePath is the path got from database and blobUrl is the azure storage path. And I'm joing these two path and converting that in 64base string. But how to pass that 64base value resultimg to Base64string again in above validationdata?. As I'm not able to access image directly for displaying. So required to convert in 64base.
How to pass resultimg value to Base64string???
[HttpGet]
public JsonResult GetImageList(int TaskID)
{
try
{
List<Validation> validationdata = new List<Validation>();
validationdata = (from d in _context.ImgTable
where (d.Taskid == TaskID )
select new Validation
{
d.ImageID,
d.Taskid,
d.ImagePath,
blobUrl = blobContainer.Uri.AbsoluteUri,
Base64string =???
}).ToList();
//Joining two path and converting it to base64
List<string> ImgByteUrl = new List<string>();
foreach (var item in validationdata.ToList())
{
var imgID = item.ID;
var storagepath = item.blobUrl; //azure storage url
var imgurl = item.ImagePath.Trim(); // db image path
var img1 = img.Split('\\');
imgurl = (storagepath + '/' + img1[5]); //joined both path
byte[] bytes = (new FileUploadDownload(img)).GetByteStream(); //converting in byte
string imreBase64Data = Convert.ToBase64String(bytes);
string resultimg = string.Format("data:image/jpg;base64,{0}", imreBase64Data);
ImgByteUrl.Add(resultimg);
//validationdata.Add(resultimg);
}
var jsonResult = Json(validationdata, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
}
catch (Exception ex)
{
}
}
Please help out how to go further else guide me with any other way. I want to display images in in html page. I'm selecting Taskid from dropdownlist and on-click of it display related images to that taskid in html table.Below is the js function:
$.ajax({
type: 'GET',
url: '@Url.Action("GetImageList")',
datatype: JSON,
data: {
'TaskID': $("#tasklist").val() //getting selected TaskID from dropdown
},
success: function (data) {
var row_no = 1;
$.each(data, function (i, item) {
+ "<td id='ItemId" + row_no + "' >" + item.ID + "</td>" // displaying image id in html table
"<td>"
+ "<div><object id='Image" + row_no + "' data=" + item.Base64string +></object>" // display image for that imageid
+ "</div></td > "
});
This is the image we get after converting to byte and passing that value to <object id='Image" + row_no + "' data=" + item.Base64string +>
i.e item.Base64string =data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAABQCAYAAABCiMhGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAadEVYdFNvZnR3YXJ........
You should use
imgtag.Sample Code:
Your function: