Displaying a image from a database in asp.net mvc

Question

Hi all,

I have a view which contains a users id and an image column.

Here's what i've tried doing to retrieve the image but i keep getting a box with an red x instead of the actual image.

View

<td><img src="<%= Url.Action( "DisplayImage" , "User" , new { id = item.id} ) %>" alt="" /></td>

Controller

  public FileContentResult DisplayImage(string id)
    {
        byte[] image = repository.GetImage(id);
        return File(image, "image/jpg");
    }

i've also tried returning an ActionResult instead and that didn't work either.

Repository

    public Byte[] GetImage(string id)
    {

        var image = db.GetImage(id).First<GetImageResult>();

        if (image == null)
            return null;
        return image.UserImage;
    }

LinqTOSQL Class

    [Function(Name="dbo.GetImage")]
public ISingleResult<GetImageResult> GetImage([Parameter(DbType="VarChar(8)")] string id)
{
 IExecuteResult result = this.ExecuteMethodCall(this, ((MethodInfo)(MethodInfo.GetCurrentMethod())), id);
 return ((ISingleResult<GetImageResult>)(result.ReturnValue));
}

public partial class GetImageResult
{
 private System.Byte[] _userImage;

 public GetImageResult()
 {
 }


 [Column(Storage="_userImage", DbType="Image")]
 public System.Byte[] UserImage
 {
  get
  {
   return this._userImage;
  }
  set
  {
   if ((this. _userImage!= value))
   {
    this. _userImage = value;
   }
  }
 }
}

I've been killing myself all day trying to get this to work, but it just isn't working. The return type on the stored procedure is an integer (atleast when i look at parameters in SQL Server Management Studio it says integer), but i can't redefine that now can i?

It's actually hitting the DisplayImage Action with the correct parameters within the UserController and returning File(imageByteArray, "image/jpg") but only a box with red x is being displayed. Any help would be greatly appreciated.

edit: I've tried debugging by adding a Reponse.BinaryWrite(imageByteArray) within the action result and hitting the url directly by goign to http://localhost/User/DisplayImage?id=10101010 and the image for that user is displayed in mspaint.

edit2: I also did a view source and my html for that image tag came out as following.

<td>
    <img src='/User.mvc/GetImage?id=U00915441' alt="" />
</td>

Thanks

Answer 1

Look at this question I had from a while back - the solution was special ActionResult type for images

Edit: Here's my code. I'm actually creating an ImageResult class from an Image that I created with GDI+ like this :

 return new ImageResult()
 {
      ImageFormat = spriteInfo.ImageFormat,
      EncodedImageBytes = spriteInfo.GetImageStream()
 };

The image result class is. You'll notice if I provide an EncodedImageBytes parameter it will send that to the output stream. This looks like exactly what you want. On the other hand if you're just passing in an Image then it will just write that Image out to the output stream.

 public class ImageResult : ActionResult
    {
        public ImageResult() { }
        public int? Quality { get; set; }
        public Image Image { get; set; }
        public ImageFormat ImageFormat { get; set; }
        public byte[] EncodedImageBytes { get; set; }

        public override void ExecuteResult(ControllerContext context)
        {
            // verify properties 
            if (EncodedImageBytes == null)
            {
                if (Image == null)
                {
                    throw new ArgumentNullException("Image");
                }
            }
            if (ImageFormat == null)
            {
                throw new ArgumentNullException("ImageFormat");
            }
            // output 
            context.HttpContext.Response.Clear();

            if (ImageFormat.Equals(ImageFormat.Bmp)) context.HttpContext.Response.ContentType = "image/bmp";
            if (ImageFormat.Equals(ImageFormat.Gif)) context.HttpContext.Response.ContentType = "image/gif";
            if (ImageFormat.Equals(ImageFormat.Icon)) context.HttpContext.Response.ContentType = "image/vnd.microsoft.icon";
            if (ImageFormat.Equals(ImageFormat.Jpeg)) context.HttpContext.Response.ContentType = "image/jpeg";
            if (ImageFormat.Equals(ImageFormat.Png)) context.HttpContext.Response.ContentType = "image/png";
            if (ImageFormat.Equals(ImageFormat.Tiff)) context.HttpContext.Response.ContentType = "image/tiff";
            if (ImageFormat.Equals(ImageFormat.Wmf)) context.HttpContext.Response.ContentType = "image/wmf";

            // output stream
            Stream outputStream = context.HttpContext.Response.OutputStream;
            if (EncodedImageBytes != null)
            {
                outputStream.Write(EncodedImageBytes, 0, EncodedImageBytes.Length);
            }
            else
            {
                ImageUtil.SaveImageToStream(outputStream, Image, ImageFormat, Quality);
            }
        }

    }