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

Question

I am displaying images as base 64 from a byte array saved in sql database .

Here is my html code

      <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" />

Image not showing however the binary numbers are appending with image source as seen in picture

Here is the code which I used to save the image as byte array

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


            }
    }

Here is the code for getting the image

Avatar = Convert.ToBase64String(profile.avatar),

Image not showing up however the string is appending with sourcce

Need help What I am doing wrong?

Answer 1

Your data it's not Base64 data. Probably its problem in server side.

For Client: Try to use this plugin for angular: https://github.com/adonespitogo/angular-base64-upload

For server side Here code for convert image to 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;
  }
}