locked
Asp.net Image control not displaying image properly RRS feed

  • Question

  • User1895174216 posted

    Hello all,

    I am quite new to ASP.net and need some help. I am trying to display a image which is located in a Network drive on to my webform. For this I have created a ASHX handler and trying to display the image. When I run in Chrome I see the image is getting displayed but as a thin line. While Firefox/IE does not even show the image.

    Below is the code for ASHX handler.

    public bool IsReusable
    {
    get { return false; }
    }

    public void ProcessRequest(HttpContext context)
    {
    try
    {
    string imgName = context.Request.QueryString["n"];
    context.Response.ContentType = "image/bmp";
    string path = @"\\myNetwork\\PBData\\" + imgName;
    Image image = Image.FromFile(path);
    context.Response.AddHeader("Content-Length", image.Height.ToString());
    image.Save(context.Response.OutputStream, ImageFormat.Bmp);

    }
    catch(Exception ex)
    {

    }

    }

    Below is the code in webform code behind, where I am setting the ImageUrl property of Imagecontrol at runtime.

    DieImage.ImageUrl = "IISHandler1.ashx?n=MV_08012018_123529.bmp";

    Below is the code I have in webform aspx file.


    <table><tr> <td style="width:818px; height:757px" >
    <div style="padding-top: 10px; width:818px; height:757px">
    <asp:Image ID="DieImage" runat="server" Width="818px" Height="757px" alternatetext="Error!"/>
    </div>
    </td>
    </tr>
    </table>

    Wdbform Image display

    Tuesday, September 25, 2018 5:07 PM

All replies

  • User475983607 posted

    The first step is to stop ignoring exceptions with an empty catch block.

    public void ProcessRequest(HttpContext context)
    {
    	string imgName = context.Request.QueryString["n"];
    	context.Response.ContentType = "image/bmp";
    	string path = @"\\myNetwork\\PBData\\" + imgName;
    	Image image = Image.FromFile(path);
    	context.Response.AddHeader("Content-Length", image.Height.ToString());
    	image.Save(context.Response.OutputStream, ImageFormat.Bmp);
    }

    Secondly, the content-length is the not the image height, it is the file size.

    https://www.dotnetperls.com/fileinfo-length

    Tuesday, September 25, 2018 5:48 PM
  • User1895174216 posted

    Thanks for a quick reply.

    I changed the line from 

    context.Response.AddHeader("Content-Length", image.Height.ToString()); 

    to

    context.Response.AddHeader("Content-Length", image.Size.ToString());

    And also removed the try..catch blocks, still no luck. Also having try catch block, I do not see any exception though. 

    Were you able to see the picture I attached in my initial post? The Image gets displayed but its like a flat thin line. Not sure where I am going wrong.

    Tuesday, September 25, 2018 6:13 PM
  • User475983607 posted

    I changed the line from 

    context.Response.AddHeader("Content-Length", image.Height.ToString()); 

    to

    context.Response.AddHeader("Content-Length", image.Size.ToString());

    Size is also not correct.  Size is the width and height of the Image object.  See the Image API docs.

    https://docs.microsoft.com/en-us/dotnet/api/system.drawing.image?view=netframework-4.7.2

    The link provided in my initial post shows how to get the file length.  Read the link...

    Were you able to see the picture I attached in my initial post? The Image gets displayed but its like a flat thin line. Not sure where I am going wrong.

    The browser uses the content-length to know how many bytes to expect.  If the content-length is zero or some unknown value then the browser does not know what to expect.

    Did you fix the ignoring exceptions issue too?

    Tuesday, September 25, 2018 6:22 PM
  • User1895174216 posted

    Ok.  The below is the updated code

    public void ProcessRequest(HttpContext context)
    {
    try
    {
    string imgName = context.Request.QueryString["n"];
    context.Response.ContentType = "image/bmp";
    string path = @"\\myNetwork\\PBData\\" + imgName;
    FileInfo f = new FileInfo(path);
    Image image = Image.FromFile(path);
    context.Response.AddHeader("Content-Length", f.Length.ToString());
    image.Save(context.Response.OutputStream, ImageFormat.Bmp);

    }
    catch
    {

    }

    }

    Is there anything wrong with my ASPX or code behind code?

    Note: I tried removing the line context.Response.AddHeader("Content-Length", f.Length.ToString()); from the above function  and I don't see any change.

    Tuesday, September 25, 2018 6:32 PM
  • User475983607 posted

    Your still hiding errors from yourself...  This example returns a png as that was all I had on hand.  Change the "if" to a "switch" if you need to accommodate more than one image type.

        public class imagehandler : IHttpHandler
        {
    
            public void ProcessRequest(HttpContext context)
            {
                string imgName = context.Request.QueryString["n"];
                string path = Path.Combine(@"C:\inetpub\wwwroot\smartadmin\img\" + imgName);
                FileInfo f = new FileInfo(path);
                context.Response.AddHeader("Content-Length", f.Length.ToString());
    
                if(f.Extension == ".png")
                {
                    context.Response.ContentType = "image/png";
                }
                
                context.Response.TransmitFile(path);
                context.Response.Flush();
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }

    Tuesday, September 25, 2018 6:57 PM
  • User1895174216 posted

    Thanks a TON!!! It worked as a charm :)

    I added the below two lines from your code above

    context.Response.TransmitFile(path);
    context.Response.Flush();

    And the wonderful thing is, its working in Chrome, FireFox and IE as well.

    However, I have one query most of my images are TIFF format. I changed the above function to show a TIFF image, but I don't see any image. Does Chrome/IE/FireFox do not support TIFF format images? 

    Tuesday, September 25, 2018 7:38 PM
  • User475983607 posted

    I don't think Chrome natively supports tiff.

    https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

    You might want to convert the images to png.

    Tuesday, September 25, 2018 9:17 PM
  • User1895174216 posted

    Thank you.

    True, seems Tiff is not supported. Like you said I have to convert all those images to either bmp or png formats.

    Wednesday, September 26, 2018 12:27 PM