How to display images in cshtml page after joining two path and converting to base64 in mvc?

Question

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........

Answer 1

You should use img tag.

Sample Code:

<div>
    <img style='display:block; width:100px;height:100px;' id='base64image'                 
    src='data:image/png;base64,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' />
</div>

Your 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><img id='Image" + row_no + "' src='data:image/png;base64,iVBORw0KGgo.../> </div></td > "
 });