Asp.net mvc - trying to display images pulled from db \

Question

//Inherits="System.Web.Mvc.ViewPage<FilmFestWeb.Models.ListVideosViewModel>"

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>ListVideos</h2>

    <% foreach(BusinessObjects.Video vid in Model.VideoList){%>
    <div class="videoBox">
           <%= Html.Encode(vid.Name) %>
           <img src="<%= vid.ThumbnailImage %>" />      
    </div>


    <%} %>

</asp:Content>

//ListVideosViewModel

public class ListVideosViewModel

{

    public IList<Video> VideoList { get; set; }

}

//Video

public class Video

{        

    public long VideoId { get; set; }

    public long TeamId { get; set; }

    public string Name { get; set; }

    public string Tags { get; set; }

    public string TeamMembers { get; set; }

    public string TranscriptFileName { get; set; }

    public string VideoFileName { get; set; }

    public int TotalNumRatings { get; set; }

    public int CumulativeTotalScore { get; set; }

    public string VideoUri { get; set; }

    public Image ThumbnailImage { get; set; }


}

I am getting the "red x" that I usually associate with image file not found. I have verified that my database table shows after the stored proc that uploads the image executes. Any insight or advice would be greatly appreciated.

Answer 1

You will not be returning an Image from you database. You will be getting a byte[]. My recommendation would be to create a ASP.NET Handler that returns images from the DB. Then you can link to the handler.

Look at this SO post for how to do that: http://stackoverflow.com/questions/21877/dynamically-rendering-aspimage-from-blob-entry-in-asp-net

Answer 2

As i see you are using mvc use this look at the example imagedata is byte[] array and imagemimetype is a string this is an example of an action in your controller

public FileContentResult GetImage(int ProductID)
{
  Product product = (from p in productsRepository.Products
  where p.ProductID == ProductID
   select p).First();
  return File(product.ImageData, product.ImageMimeType);
}

use this to show the image in the view

 <img src="<%= Url.Action("GetImage", "Products",
 new { Model.ProductID }) %>" />

Answer 3

Thank you for the help. This is how I solved the issue (uses entlib 4.1)

public ThumbnailImage GetThumbnailImageByVideoId( long videoId )

    {

        Database db = DatabaseFactory.CreateDatabase("Connection String");
        DataSet ds = new DataSet();

        ThumbnailImage img =  null;

        try
        {

            using (DbCommand cmd = db.GetStoredProcCommand("usp_GetThumbnailImageByVideoId"))
            {
                db.AddInParameter(cmd, "VideoId", DbType.Int64, videoId);                    
                db.LoadDataSet(cmd, ds, "Video");
            }


            foreach (DataRow dr in ds.Tables["Video"].Rows)
            {
                if (! string.IsNullOrEmpty(dr["ThumbnailImage"].ToString()))
                {
                    byte[] b = dr["ThumbnailImage"] as byte[];
                    MemoryStream ms = new MemoryStream(b);
                    img = new ThumbnailImage();
                    img.Image = Image.FromStream(ms);
                    img.ContentType = dr["ImageContentType"].ToString();
                }

                break;
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
        return img;
    }

Answer 4

Oops forgot to post the code from the Controller. Here it is:

    public FileResult GetImageFile(long videoId)
    {
        byte[] imgBytes = null;
        string contentType = string.Empty;
        FileResult fr = null;
        try
        {
            VideoController v = new VideoController();

            ThumbnailImage img = v.GetThumbnailImage(videoId);
            if (img != null)
            {
                MemoryStream ms = new MemoryStream();
                img.Image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
                imgBytes = ms.ToArray();                    
                contentType = img.ContentType;
                fr = File(imgBytes, contentType);
            }
            else
            {
                return null;
            }

        }

        catch(Exception ex)
        {
            throw ex;
        }


        return fr;
    }