ASP.NET Web Forms中GridView图片加载失败时隐藏的实现方法

方案一：前端onerror事件快速处理 #

直接在<img>标签中添加onerror事件，当图片加载失败时隐藏图片及其父级链接元素，避免空白占位：

修改ASPX中的ItemTemplate部分：

<ItemTemplate>
    <a href="<%# (Container.DataItem as MandatMobile.DAL.MandatsEcoleCCadmin_dates_Result).url %>" target="_blank">
        <img style="width:160px" alt="-" src='<%# getImage(Container.DataItem as MandatMobile.DAL.MandatsEcoleCCadmin_dates_Result) %>' 
             onerror="this.style.display='none'; this.parentElement.style.display='none';">
    </a>
</ItemTemplate>

原理说明 #

onerror事件会在图片加载失败（如404、网络错误等）时触发，通过JS代码将图片自身和包裹它的<a>标签设置为display:none，彻底消除空白占位区域。

方案二：后端提前验证并控制渲染 #

如果不想依赖前端JS，可以在后端提前判断图片是否可访问，仅在图片有效时渲染图片元素：

1. 修改ASPX的ItemTemplate #

将原有的图片和链接替换为后端方法输出：

<ItemTemplate>
    <%# RenderImage(Container.DataItem as MandatMobile.DAL.MandatsEcoleCCadmin_dates_Result) %>
</ItemTemplate>

2. 后端添加RenderImage和辅助验证方法 #

protected string RenderImage(MandatsEcoleCCadmin_dates_Result p)
{
    // 先获取图片路径
    string imgUrl = getImage(p);
    if (string.IsNullOrWhiteSpace(imgUrl))
        return string.Empty;

    // 验证图片是否可访问（可选，根据需求决定是否启用）
    if (!IsImageAccessible(imgUrl))
        return string.Empty;

    // 拼接返回完整的HTML元素
    string linkUrl = p.url;
    return $"<a href=\"{linkUrl}\" target=\"_blank\"><img style=\"width:160px\" alt=\"-\" src=\"{imgUrl}\"></a>";
}

// 辅助方法：检查图片URL是否可访问
private bool IsImageAccessible(string imgUrl)
{
    try
    {
        // 建议复用HttpClient实例，避免频繁创建销毁
        using (var httpClient = new HttpClient())
        {
            // 发送HEAD请求，只获取响应头，比GET更高效
            var response = httpClient.SendAsync(new HttpRequestMessage(HttpMethod.Head, imgUrl)).Result;
            return response.IsSuccessStatusCode;
        }
    }
    catch
    {
        // 任何异常都视为图片不可访问
        return false;
    }
}

注意事项 #

• 后端验证会增加网络请求开销，可能影响页面加载速度，建议根据实际场景权衡是否启用。
• 若要复用HttpClient，可将其声明为静态成员，避免每次调用都创建新实例。

内容的提问来源于stack exchange，提问作者Antoine Pelletier