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 = "";

}

}