Alternate image display in asp.net

问题

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) { }
}

回答1:

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.

回答2:

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

回答3:

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.

回答4:

Just do using onerror event

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

回答5:

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>

来源：https://stackoverflow.com/questions/14100618/alternate-image-display-in-asp-net

标签

javascript

ASP.NET

datalist