### Image 控件

#### 1．Image 控件的概述

Image 控件用于在页面上显示图像。在使用 Image 控件时，可以在设计时或运行时以编程方式为 Image 对象指定图形文件。图 1 为 Image 控件。

图 1 Image 控件

Image 控件常用属性及说明如表 1 所示。

表 1 Image 控件常用的属性

属性名称 | 属性值
ID | 获取或设置分配给服务器控件的编程标识符
AlternateText | 在图像无法显示时显示的替换文字
ImageAlign | 获取或设置 Image 控件相对于网页上其他元素的对齐方式
ImageUrl | 获取或设置在 Image 控件中显示的图像的位置
Enabled | 获取或设置一个值，该值指示是否已启用控件

下面介绍一下 Image 控件的 ImageAlign 属性和 ImageUrl 属性。

q ImageAlign 属性

ImageAlign 属性指定或确定图像相对于网页上其他元素的对齐方式。在表 2 中列出了可能的对齐方式。

表 2 Image 控件的 ImageAlign 属性值

对齐方式 | 说明
Left | 图像沿网页的左边缘对齐，文字在图像右边换行
Right | 图像沿网页的右边缘对齐，文字在图像左边换行
Baseline | 图像的下边缘与第一行文本的下边缘对齐
Top | 图像的上边缘与同一行上最高元素的上边缘对齐
Middle | 图像的中间与第一行文本的下边缘对齐
Bottom | 图像的下边缘与第一行文本的下边缘对齐
AbsBottom | 图像的下边缘与同一行中最大元素的下边缘对齐
AbsMiddle | 图像的中间与同一行中最大元素的中间对齐
TextTop | 图像的上边缘与同一行上最高文本的上边缘对齐

q ImageUrl 属性

ImageUrl 属性用于设置在 Image 控件中显示图像的位置（URL）。在设置 ImageUrl 属性值时，可以使用相对 URL，也可以使用绝对 URL。相对 URL 使图像的位置与网页的位置相关联，当整个站点移动到服务器上的其他目录时，不需要修改 ImageUrl 属性值；而绝对 URL 使图像的位置与服务器上的完整路径相关联，当改更站点路径时，需要修改 ImageUrl 属性值。笔者建议，在设置 Image 控件的 ImageUrl 属性值时，使用相对 URL。

#### 2．实现动态显示用户头像功能

下面示例主要是通过改变 Image 控件的 ImageUrl 属性值来动态显示用户头像。执行程序，并在下列框中选择“boy 图像”，示例运行结果如图 2 所示，在下列框中选择“girl 图像”，示例运行结果如图 3 所示。

图 2 “boy 图像”显示

图 3 “girl 图像”显示

程序实现的主要步骤：

新建一个网站，默认主页为 Default.aspx，在 Default.aspx 页面上添加一个 DropDownList 控件和一个 Image 控件。其属性设置及其用途如表 3 所示。

表 3 Default.aspx 页面中控件属性设置及其用途

控件类型 | 控件名称 | 主要属性设置 | 用途
标准/DropDownList 控件 | DropDownList1 | AutoPostBack 属性设置为 True | 当单击控件时，自动回发到服务器中
标准/ Image 控件 | Image1 | AlternateText 属性设置为“显示头像” | 在图像无法显示时，显示的替换文字

可以在 DropDownList 控件的 SelectedIndexChanged 事件下，编写如下代码，实现动态显示用户头像。

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

//用户选择 DropDownList 控件中的不同项时，显示不同的用户头像

if (DropDownList1.SelectedIndex == 1)

{

Image1.ImageUrl = "~/images/boy.jpg";

}

else if (DropDownList1.SelectedIndex == 2)

{

Image1.ImageUrl = "~/images/girl.jpg";

}

else

{

Image1.ImageUrl = "";

}

}