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
– 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
– Wasi, Commented Dec 31, 2012 at 11:03

Aristos · Accepted Answer · 2013-01-02 12:33:16Z

6

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.

edited Jan 2, 2013 at 12:33

answered Dec 31, 2012 at 11:09

Aristos

66.7k16 gold badges117 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Wasi Over a year ago

If i use img tag I am not able to use onClick functionality

Aristos Over a year ago

@user1374181 do not use img tag, this is an example. Just use the onerror.

Aristos Over a year ago

@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 Over a year ago

@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 Over a year ago

@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.

|

sreejithsdev · Accepted Answer · 2012-12-31 11:21:03Z

2

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

answered Dec 31, 2012 at 11:21

sreejithsdev

1,21012 silver badges26 bronze badges

Comments

Dev · Accepted Answer · 2012-12-31 11:01:24Z

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, 2012 at 11:01

Dev

6,75013 gold badges71 silver badges112 bronze badges

Comments

Pankaj Agarwal · Accepted Answer · 2012-12-31 11:45:26Z

0

Just do using onerror event

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

answered Dec 31, 2012 at 11:45

Pankaj Agarwal

11.4k12 gold badges46 silver badges59 bronze badges

1 Comment

Aristos Over a year ago

Did I say something different on my answer ?

Isilio Peluffo · Accepted Answer · 2016-03-29 16:16:02Z

0

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>

answered Mar 29, 2016 at 16:16

Isilio Peluffo

111 bronze badge

Collectives™ on Stack Overflow

Alternate image display in asp.net

5 Answers 5

on asp.net image button

image send from code behind

8 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

on asp.net image button

image send from code behind

8 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related