使用 Angular JS 未显示 base 64 的图像源

Question

我正在显示 sql 数据库中保存的字节数组中的 base 64 图像。

这是我的html代码

      <img id="imgavatar" data-ng-src="data:image/jpeg;base64,{{user.Avatar}}" data-err-src="~/Images/avatar.png" style="width:100px;height:100px;position:absolute" />

    <img id="imgprofile" data-ng-src="data:image/jpeg;base64,{{user.ProfileImage}}" data-err-src="~/Images/image-icon.png" style="width:200px;height:200px;position:absolute" />

图像未显示，但是二进制数字附加了图像源，如图所示

这是我用来将图像保存为字节数组的代码

[HttpPost]
    public ActionResult Edit(string id,string user,HttpPostedFileBase avatar, HttpPostedFileBase profile)
    {
     if (avatar != null)
            {
                p.avatar = new byte[avatar.InputStream.Length];


            }
    }

这里是获取图片的代码

Avatar = Convert.ToBase64String(profile.avatar),

图像未显示，但字符串附加了 source

需要帮助我做错了什么？

Answer 1

您的数据不是 Base64 数据。可能是服务器端的问题。

对于客户： 尝试将此插件用于 angular： https://github.com/adonespitogo/angular-base64-upload

对于服务器端 将图像转换为 Base64 的代码如下：

public string ImageToBase64(Image image, 
  System.Drawing.Imaging.ImageFormat format)
{
  using (MemoryStream ms = new MemoryStream())
  {
    // Convert Image to byte[]
    image.Save(ms, format);
    byte[] imageBytes = ms.ToArray();

    // Convert byte[] to Base64 String
    string base64String = Convert.ToBase64String(imageBytes);
    return base64String;
  }
}

使用 Angular JS 未显示 base 64 的图像源

Image source with base 64 not showing up using Angular JS

asp.net-mvc

base64

image

bytearray

angularjs