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.



Answers

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: Dynamically Rendering asp:Image from BLOB entry in ASP.NET



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;
}


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

 
By : Chino


This video can help you solving your question :)
By: admin