加入两条路径并在mvc中转换为base64后如何在cshtml页面中显示图像?

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

这是我的控制器。

ImagePath是从数据库中获取的路径,blobUrl是天蓝色的存储路径。我加入这两条路径并将其转换为 64base 字符串。但是如何在上面的 validationdata 中再次将那个 64base 值 resultimg 传递给 Base64string?。因为我无法直接访问图像进行显示。所以需要在 64base 中转换。

如何将 resultimg 值传递给 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)
 {
 }

}

请帮助我如何走得更远,否则请用任何其他方式指导我。我想在 html 页面中显示图像。我从下拉列表中选择 Taskid,然后单击它显示与 html 中该 taskid 相关的图像 table.Below 是 js 函数:

$.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 > "
     });

这是我们在转换为字节并将该值传递给

你应该使用 img 标签。

示例代码:

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

你的函数:

$.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 > "
 });