ASP.Net中如何让服务器端图片标签渲染空alt属性（无需派生类）

为了通过无障碍测试，纯装饰性图片必须添加alt=""属性，避免屏幕阅读器读取无意义内容。但ASP.NET里两种常见写法都会导致渲染后的HTML丢失alt属性：

<!-- HTML服务器控件写法 -->
<img runat="server" src="~/myimage.jpg" alt="" />
<!-- Web服务器控件写法 -->
<asp:Image runat="server" ImageUrl="~/myimage.jpg" AlternateText="" />

渲染后都会变成不带alt属性的标签：

<img src="myimage.jpg" />
<img src="myimage.jpg" style="border-width:0px;" />

不用创建新派生类的话，有以下几种解决方式：

1. 后台代码手动添加alt属性 #

不管是HTML服务器控件还是Web服务器控件，都可以通过后台代码给控件的Attributes集合添加空值的alt属性，强制渲染输出：

针对HTML服务器控件（<img runat="server">） #

在页面后台的事件（比如Page_Load）中添加代码：

// 假设控件ID为myHtmlImage
myHtmlImage.Attributes["alt"] = string.Empty;

针对Web服务器控件（<asp:Image>） #

同样在后台事件中添加代码：

// 假设控件ID为myAspImage
myAspImage.Attributes["alt"] = string.Empty;

这种方式会绕过控件自身对AlternateText的处理逻辑，直接在输出的HTML里保留alt=""。

2. 使用Literal控件输出原生HTML #

如果不想编写后台逻辑，可以用Literal控件直接输出包含空alt属性的HTML，设置Mode="PassThrough"确保服务器不修改内容：

<asp:Literal runat="server" Mode="PassThrough" Text='<img src="/myimage.jpg" alt="" />' />

如果需要解析~开头的路径，可在后台动态设置Text：

myLiteral.Text = $"<img src=\"{ResolveUrl("~/myimage.jpg")}\" alt=\"\" />";

3. 利用PreRender事件统一处理 #

如果页面中有多个需要设置空alt的图片，可以通过PreRender事件批量处理，减少重复代码：

前端控件绑定事件：

<img runat="server" src="~/myimage.jpg" OnPreRender="DecorativeImage_PreRender" />
<asp:Image runat="server" ImageUrl="~/myotherimage.jpg" OnPreRender="DecorativeImage_PreRender" />

后台事件处理代码：

protected void DecorativeImage_PreRender(object sender, EventArgs e)
{
    var imageControl = sender as WebControl;
    if (imageControl != null)
    {
        imageControl.Attributes["alt"] = string.Empty;
    }
}

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