I am trying to provide alternate image as some of the images are corrupt and do not get display, I tried with js but no success, so need help and suggestions on how to do the same. the scenario is on page load the information of students get bound to DataList and on the basis of it image is pulled from another table by GetImage class but the problem is some images are corrupt so I want to display another dummy image. I changed BG image using CSS but its not as expected.

    <asp:DataList ID="DataList1" CssClass="slider" r RepeatColumns="6" RepeatDirection="Vertical" runat="server" OnEditCommand="DataList1_EditCommand" OnItemCommand="DataList1_ItemCommand">
<ItemTemplate>
    <ul>
    <li><a class="info" href="#">
        <asp:ImageButton CssClass="imagetest" AlternateText=" " ID="Image1" name="mybutton" runat="server" Width="140" Height="140" CommandName="image" OnLoad="changeImage();" CommandArgument="image" CausesValidation="false" ImageUrl='<%# "GetImage.aspx?source=" + Eval("city") +"&RollNo="+ Eval("RollNo") +"&state="+ Eval("state")+"&fname="+Eval("FirstName") +"&lname=" + Eval("LastName") %>'
        </li>
    </ul>
</ItemTemplate>
</asp:DataList>


protected void Page_Load(object sender, EventArgs e)
{       
    string city = Request.QueryString["city"];
    string RollNo = Request.QueryString["RollNo"];
    string state = Request.QueryString["state"];
    string fname = Request.QueryString["fname"];
    string lname = Request.QueryString["lname"];
    DataAccess dao = new DataAccess();
    dao.openConnection();
    byte[] arr = dao.GetPicture(city, RollNo, state, fname, lname);
    //Response.BinaryWrite(arr);
    try
    {    
        Response.BinaryWrite(arr);
    }    
    catch (Exception) { }
}

I am trying to provide alternate image as some of the images are corrupt and do not get display, I tried with js but no success, so need help and suggestions on how to do the same. the scenario is on page load the information of students get bound to DataList and on the basis of it image is pulled from another table by GetImage class but the problem is some images are corrupt so I want to display another dummy image. I changed BG image using CSS but its not as expected.

    <asp:DataList ID="DataList1" CssClass="slider" r RepeatColumns="6" RepeatDirection="Vertical" runat="server" OnEditCommand="DataList1_EditCommand" OnItemCommand="DataList1_ItemCommand">
<ItemTemplate>
    <ul>
    <li><a class="info" href="#">
        <asp:ImageButton CssClass="imagetest" AlternateText=" " ID="Image1" name="mybutton" runat="server" Width="140" Height="140" CommandName="image" OnLoad="changeImage();" CommandArgument="image" CausesValidation="false" ImageUrl='<%# "GetImage.aspx?source=" + Eval("city") +"&RollNo="+ Eval("RollNo") +"&state="+ Eval("state")+"&fname="+Eval("FirstName") +"&lname=" + Eval("LastName") %>'
        </li>
    </ul>
</ItemTemplate>
</asp:DataList>


protected void Page_Load(object sender, EventArgs e)
{       
    string city = Request.QueryString["city"];
    string RollNo = Request.QueryString["RollNo"];
    string state = Request.QueryString["state"];
    string fname = Request.QueryString["fname"];
    string lname = Request.QueryString["lname"];
    DataAccess dao = new DataAccess();
    dao.openConnection();
    byte[] arr = dao.GetPicture(city, RollNo, state, fname, lname);
    //Response.BinaryWrite(arr);
    try
    {    
        Response.BinaryWrite(arr);
    }    
    catch (Exception) { }
}

• c#
• javascript
• asp
• datalist

• I would write a method with a string parameter (name of image) that checks image's existance, if existed, return the input parameter (because it is OK) and if not, return a constant image. – Mahdi Tahsildari Commented Dec 31, 2012 at 10:59
• @MahdiTahsildari:Can u elaborate brother because here the image is there and iam get binary value... if it was null I can handle that... – Wasi Commented Dec 31, 2012 at 11:03

5 Answers 5

You can use the onerror of the image and show an alternative image if not loaded.

Here is a basic example with one img tag, on asp you can place similar the onerror call

<img id="one" src="image.gif" onerror="imgError(this)">​

and the javascript

function imgError(me)
{
   // place here the alternative image
   var AlterNativeImg = "/images/emptyimage.gif";

   // to avoid the case that even the alternative fails        
   if(AlterNativeImg != me.src)
     me.src = AlterNativeImg;
}

and live: http://jsfiddle/DxN69/2/ and also http://jsfiddle/DxN69/3/

and final: http://jsfiddle/DxN69/4/

on asp image button

you simple add the onerror="imgError(this)" on your asp tag as:

<asp:ImageButton ID="ImageButton1" runat="server" onclick="ImageButton1_Click" ImageUrl="image.jpg" onerror="imgError(this)" />

even if the image button is rendered as input the final result is the same.

image send from code behind

after your last update is clear that you have make a big mistake trying to send a page as an image, and you did not even change the ContentType of it. So use a handler, eg make a new handler named loadImage.ashx and there write your code as:

   public void ProcessRequest(HttpContext context)
    {
      // this is a header that you can get when you read the image
      context.Response.ContentType = "image/jpeg";
      // cache the image - 24h example
      context.Response.Cache.SetExpires(DateTime.Now.AddHours(24));
      context.Response.Cache.SetMaxAge(new TimeSpan(24, 0, 0));
      // render direct
      context.Response.BufferOutput = false;

      // load here the image as you do
      ....

      // the size of the image
      context.Response.AddHeader("Content-Length", imageData.Length.ToString());
      // and send it to browser
      context.Response.OutputStream.Write(imageData, 0, imageData.Length);
    }

and your call will be something like:

<asp:ImageButton CssClass="imagetest" AlternateText=" " ID="Image1" name="mybutton" runat="server" Width="140" Height="140" CommandName="image" OnLoad="changeImage();" CommandArgument="image" CausesValidation="false" ImageUrl='<%# "loadImage.ashx?source=" + Eval("city") +"&RollNo="+ Eval("RollNo") +"&state="+ Eval("state")+"&fname="+Eval("FirstName") +"&lname=" + Eval("LastName") %>'

now here you can double check if the image exist and send some default image if not exist.

<img src="images.png" onerror="this.onerror=null;this.src='default.png'">

I would preffer to set imageURL property for the default image you want to display. If the image is exists in database record then replace the imageURL with that record else keep it as it is.

Just do using onerror event

<img src="image.gif" onerror="alert('The image could not be loaded.')"> 

Instead of creating a server side image button why you just not create an html image with a link, that acts as an image button.

<a class="info" href="#">
    <img src="<%# GetImage.aspx?source=" + Eval("city") +"&RollNo="+ Eval("RollNo") +"&state="+ Eval("state")+"&fname="+Eval("FirstName") +"&lname=" + Eval("LastName") %>" onerror="this.src='<%=Page.ResolveClientUrl("~/images/emptyimage.gif") %>'" alt="" class="imagetest" />
</a>