Alternate image display in asp.net

Question

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 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, Dec 31 '12 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, Dec 31 '12 at 11:03

Aristos · Accepted Answer · 2013-01-02T12:33:16.460

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.net 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.net/DxN69/2/ and also http://jsfiddle.net/DxN69/3/

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

on asp.net image button

you simple add the onerror="imgError(this)" on your asp.net 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.

@user1374181 do not use img tag, this is an example. Just use the `onerror`. — Aristos, Dec 31 '12 at 11:28
@user1374181 I just make a test and worked, and I have update my answer. Is not on list, but if you place it is rendered it as attribute. Make a test and you see that too. — Aristos, Dec 31 '12 at 11:34
@user1374181 if not working, then you probably send some data that is not a valid image - this is something different. As you see on the live example if the image is not found is work. But if you send some data as image, but the data is not valid then maybe can not find it. What browser do you use for the test ? — Aristos, Dec 31 '12 at 11:43
@user1374181 me too, but tested and on others. Your problem is that the data is not valid... you need to check them on code behind before send them out. — Aristos, Dec 31 '12 at 11:51
how can data be verified... have came across many discussion where they mentioned that we cannot verify if the data is valid... — Wasi, Dec 31 '12 at 11:54
@user1374181 For sure now that I am see you use a page to show the image, and not a handler. This is a bug. Also if you give me some live page to see I may tell you something about. The main issue here is how you send the data, inside the getimage of yours and not the part you show. — Aristos, Dec 31 '12 at 11:56
Have added the GetImage code in the question for ur revive... Since it is a confidential project can't give the live page infos — Wasi, Dec 31 '12 at 12:01

score 2 · Answer 2 · answered Dec 31 '12 at 11:21

2

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

answered Dec 31 '12 at 11:21

sreejithsdev

1,202
12
26

score 0 · Answer 3 · answered Dec 31 '12 at 11:01

0

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.

answered Dec 31 '12 at 11:01

Dev

6,570
10
66
112

score 0 · Answer 4 · answered Dec 31 '12 at 11:45

0

Just do using onerror event

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

answered Dec 31 '12 at 11:45

Pankaj Agarwal

11,191
12
43
59

Did I say something different on my answer ? – Aristos Dec 31 '12 at 12:09

score 0 · Answer 5 · answered Mar 29 '16 at 16:16

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>

Alternate image display in asp.net

5 Answers5

on asp.net image button

image send from code behind

Linked