Put the retrieved image from DB into img html tag RSS

• • Reply
  

  freakysquash

  Member

  228 Points

  155 Posts

  Put the retrieved image from DB into img html tag

  Mar 24, 2012 02:11 PM|LINK

  The tutorial from Mike works fine (Save And Retrieve Files From a Sql Server CE Database with WebMatrix), even on MySQL database. I used the BLOB data type to store the binary data. However, I really don't know how to put the retrieved image into img html tag. Thanks for responses!

  Here is a code snippet:

  var getImage = "SELECT * FROM image WHERE id= @0";
  int id = 1;
  var imageData = db.QuerySingle(getImage, id);
  Response.AddHeader("content-disposition", "inline; filename=" + imageData.filename);
  Response.ContentType = imageData.mime_type;
  Response.BinaryWrite((byte[])imageData.file_content);

  Database mysql webpages retrieve image

• • Reply
  

  p3tar

  Participant

  1526 Points

  238 Posts

  Re: Put the retrieved image from DB into img html tag

  Mar 24, 2012 02:34 PM|LINK

  You need to create a Page or HTTP handler (ashx) for retrieving images from DB and writing them to the response... 

  <img id="imgSomeImage" alt="" src="~/ImageHandler.ashx?imageId=<someId>"/>

  Maybe these articles could help you:

  http://aspalliance.com/1322_Displaying_Images_in_ASPNET_Using_HttpHandlers.5

  http://stackoverflow.com/questions/2482104/how-to-show-a-image-in-database-in-the-image-control-of-asp-net

  http://www.worldofasp.net/tut/images/Displaying_images_in_ASPNET_using_HttpHandlers_92.aspx

  "I'm just trying to give back to the community..."
  If I helped please mark my posts as "Answer". Cheers.
• • Reply
  

  GmGregori

  Contributor

  5564 Points

  749 Posts

  Re: Put the retrieved image from DB into img html tag

  Mar 24, 2012 04:31 PM|LINK

  The easyest way is to keep using the download.cshtml file proposed by Mike in his article.

  The img tag should look like:

  <img src="download.cshtml?Id=1" alt="" />

  • Marked as answer by freakysquash on Mar 24, 2012 09:47 PM
• • Reply
  

  freakysquash

  Member

  228 Points

  155 Posts

  Re: Put the retrieved image from DB into img html tag

  Mar 25, 2012 10:48 AM|LINK

  Now that the retrieved image is in the img tag, there's another thing I want to do. I want to have a default image in case there is no image found in db. Right now, I have this snippet of code that does not work.

  var getImage = "SELECT * FROM image WHERE id= @0";
  int id = 1;
  var imageData = db.QuerySingle(getImage, id);
  if(imageData != null){
      Response.AddHeader("content-disposition", "inline; filename=" + imageData.filename);
      Response.ContentType = imageData.mime_type;
      Response.BinaryWrite((byte[])imageData.file_content);]
  }
  else{
       FileStream myFileStream;
       long fileSize;
   
       myFileStream = new FileStream("../images/no-image.png", FileMode.Open);
       fileSize = myFileStream.Length;
        
       byte[] buffer = new byte[(int)fileSize];
       myFileStream.Read(buffer, 0, (int)fileSize);
       myFileStream.Close();
   
       Response.AddHeader("content-disposition", "inline; filename=../images/no-image.png");
       Response.ContentType = "image/png";
       Response.BinaryWrite(buffer);
  }

• • Reply
  

  GmGregori

  Contributor

  5564 Points

  749 Posts

  Re: Put the retrieved image from DB into img html tag

  Mar 26, 2012 02:00 PM|LINK

  freakysquash

  I want to have a default image in case there is no image found in db.

  Maybe you should use a download.cshtml file modified like this one:

  @{
      int id = 0;
      if(Request["Id"].IsInt()){
          id = Request["Id"].AsInt();
          var db = Database.Open("FileUploading");
          var sql = "Select * From Files Where FileId = @0";
          var file = db.QuerySingle(sql, id);
          if(file != null){
              Response.AddHeader("content-disposition", "inline; filename=" + file.FileName);
              Response.ContentType = file.MimeType;
              Response.BinaryWrite((byte[])file.FileContent);
          } else {
              Response.AddHeader("content-disposition", "inline; filename=no-image.png");
              Response.ContentType = "image/png";
              byte[] byteArray = File.ReadAllBytes(Server.MapPath("~/images/no-image.png"));
              Response.BinaryWrite(byteArray);
          }
      }
  }

  You should replace my variables' names with yours.

  • Edited by GmGregori on Mar 26, 2012 02:04 PM