asp.net 中的替代图像显示答案

【问题标题】：Alternate image display in asp.netasp.net 中的替代图像显示
【发布时间】：2012-12-31 10:53:00
【问题描述】：

我正在尝试提供替代图像，因为某些图像已损坏且无法显示，我尝试使用 js 但没有成功，因此需要有关如何执行相同操作的帮助和建议。场景是在页面加载时，学生的信息绑定到 DataList，并在此基础上通过 GetImage 类从另一个表中提取图像，但问题是某些图像已损坏，因此我想显示另一个虚拟图像。我使用 CSS 更改了 BG 图像，但效果不如预期。

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

【问题讨论】：

我会编写一个带有字符串参数（图像名称）的方法来检查图像是否存在，如果存在，则返回输入参数（因为它可以），如果不存在，则返回一个常量图像。
@MahdiTahsildari：你能详细说明一下吗兄弟，因为这里有图像并且我得到二进制值......如果它是空的，我可以处理......

标签： c# javascript asp.net datalist

【解决方案1】：

您可以使用图片的onerror 并在未加载的情况下显示替代图片。

这是一个带有一个 img 标签的基本示例，在 asp.net 上您可以放置类似的 onerror 调用

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

和 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;
}

直播：http://jsfiddle.net/DxN69/2/ 还有http://jsfiddle.net/DxN69/3/

最后：http://jsfiddle.net/DxN69/4/

在 asp.net 图片按钮上

您只需在您的 asp.net 标签上添加onerror="imgError(this)"：

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

即使图像按钮呈现为input，最终的结果也是一样的。

图片从后面的代码发送

在您上次更新后，您清楚地知道您在尝试将页面作为图像发送时犯了一个大错误，而您甚至没有更改它的 ContentType。所以使用handler，例如创建一个名为loadImage.ashx 的新处理程序，然后将代码编写为：

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

你的电话会是这样的：

<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") %>'

现在您可以在这里仔细检查图像是否存在，如果不存在则发送一些默认图像。

【讨论】：

如果我使用 img 标签，我将无法使用 onClick 功能
@user1374181 不要使用 img 标签，这是一个例子。只需使用onerror。
@user1374181 我只是做了一个测试并且工作，我已经更新了我的答案。不在列表中，但如果您放置它，则会将其呈现为属性。做一个测试，你也会看到。
@user1374181 如果不起作用，那么您可能发送了一些不是有效图像的数据 - 这是不同的东西。正如您在实时示例中看到的那样，如果找不到图像是有效的。但是，如果您将一些数据作为图像发送，但数据无效，则可能找不到它。您使用什么浏览器进行测试？
@user1374181 我也是，但经过测试和其他人。您的问题是数据无效......您需要在发送它们之前检查它们背后的代码。

【解决方案2】：

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

【讨论】：

【解决方案3】：

我更愿意为您要显示的default image 设置imageURL 属性。如果图像存在于database 记录中，则将imageURL 替换为该记录，否则保持原样。

【讨论】：

【解决方案4】：

只需使用onerror event

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

【讨论】：

我的回答有什么不同吗？

【解决方案5】：

与其创建服务器端图像按钮，不如直接创建带有链接的 html 图像，它充当图像按钮。

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

【讨论】：