ASP.NET - Image Web 服务器控件概述

最新推荐文章于 2024-05-12 20:28:22 发布

原创最新推荐文章于 2024-05-12 20:28:22 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#image #服务器 #asp.net #web #asp #图形

.NET Framework 专栏收录该内容

170 篇文章

订阅专栏

本文介绍了ASP.NET中的Image Web服务器控件，用于在网页上显示图像，支持图像URL绑定到数据源，以及如何设置图像的属性如ImageUrl、AlternateText等。控件不支持事件，但可以通过ImageMap或ImageButton实现交互。示例展示了如何调整图像对齐方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Image Web 服务器控件使您可以在 ASP.NET 网页上显示图像，并用自己的代码管理这些图像。

一、背景

可以在设计时或运行时以编程方式为 Image 对象指定图形文件。还可以将控件的 ImageUrl 属性绑定到一个数据源，以根据数据库信息显示图形。

与大多数其他 Web 服务器控件不同，Image 控件不支持任何事件。例如，Image 控件不响应鼠标单击事件。实际上，可以通过使用 ImageMap 或 ImageButton Web 服务器控件来创建交互式图像。

指定文本元素

除了显示图形之外，Image 控件还使您可以为图像指定各种类型的文本，如下所示：

ToolTip 在一些浏览器中作为工具提示显示的文本。

AlternateText 在无法找到图形文件时显示的文本。如果未指定任何 ToolTip 属性，某些浏览器将使用 AlternateText 值作为工具提示。

如果将 GenerateEmptyAlternateText 属性设置为 true，则所呈现的图像元素的 alt 属性将设置为空字符串。

二、如何：向 Web 窗体页添加 Image Web 服务器控件 (Visual Studio)

1、从工具箱的“标准”选项卡中，将 Image 控件拖到页面上。

2、在“属性”窗口的“外观”类别中，将控件的 ImageUrl 属性设置为 .gif、.jpg 或其他 Web 图形文件的 URL。

安全说明：与 Image 控件关联的 URL 指向外部资源。如果您指向不属于自己的资源，请确保您的用户可以安全地使用这些资源。

说明：单击属性框中的相应按钮以显示“选择图像”对话框。您可以在此对话框中选择图像文件。

3、还可以选择设置下列 Image 控件属性。

属性	说明
Height 和 Width	在页面上为图形保留空间。当呈现页面时，将根据保留的空间相应调整图像大小。
ImageAlign	使用诸如 Top、Bottom、Left、Middle 和 Right 的值，将图像与周围文本对齐。在代码中，图像对齐是通过使用 ImageAlign 枚举来设置的。
AlternateText	如果无法加载图形，将在显示时用文本来代替。有些浏览器中，该文本还会显示为工具提示。

三、类参考

下表列出了与 Image 控件相关的类。

成员	说明
Image	控件的主类。
ImageAlign	一个表示图像相对于网页文本的对齐选项的枚举。

四、Image 类

使用 Image 控件在网页上显示任何受执行请求的浏览器支持的有效图像。通过设置 ImageUrl 属性来指定所显示图像的路径。如果图像不可用，可以通过设置 AlternateText 属性来指定为取代图像而显示的文本。通过设置 ImageAlign 属性来指定图像相对于网页上其他元素的对齐方式。

说明：此控件只显示图像。如果需要捕获图像上的鼠标单击，请使用 ImageButton 控件。

示例

下面的示例说明如何在网页上创建 Image 控件。

说明：下面的代码示例使用单文件代码模型，当它直接复制到代码隐藏文件时可能不能正常工作。此代码示例必须被复制到具有 .aspx 扩展名的空文本文件中。

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html >

<head>

<title>Image Example</title>

void Button_Click(Object sender, EventArgs e)

{

switch(DropList1.SelectedIndex)

{

case 0:

Image1.ImageAlign = ImageAlign.NotSet;

break;

case 1:

Image1.ImageAlign = ImageAlign.Left;

break;

case 2:

Image1.ImageAlign = ImageAlign.Right;

break;

case 3:

Image1.ImageAlign = ImageAlign.Baseline;

break;

case 4:

Image1.ImageAlign = ImageAlign.Top;

break;

case 5:

Image1.ImageAlign = ImageAlign.Middle;

break;

case 6:

Image1.ImageAlign = ImageAlign.Bottom;

break;

case 7:

Image1.ImageAlign = ImageAlign.AbsBottom;

break;

case 8:

Image1.ImageAlign = ImageAlign.AbsMiddle;

break;

case 9:

Image1.ImageAlign = ImageAlign.TextTop;

break;

default:

Image1.ImageAlign = ImageAlign.NotSet;

break;

}

</script>

</head>

<body>

<h3>Image Example</h3>

Text Text Text Text Text Text Text Text Text Text Text Text

</div>

<asp:Image id="Image1" runat="server"

AlternateText="Image text"

ImageAlign="left"

ImageUrl="images/image1.jpg"/>

<hr />

Select Image Align: <br />

<asp:DropDownList id="DropList1"

runat="server">

<asp:ListItem>NotSet</asp:ListItem>

<asp:ListItem>Left</asp:ListItem>

<asp:ListItem>Right</asp:ListItem>

<asp:ListItem>BaseLine</asp:ListItem>

<asp:ListItem>Top</asp:ListItem>

<asp:ListItem>Middle</asp:ListItem>

<asp:ListItem>Bottom</asp:ListItem>

<asp:ListItem>AbsBottom</asp:ListItem>

<asp:ListItem>AbsMiddle</asp:ListItem>

<asp:ListItem>TextTop</asp:ListItem>

</asp:DropDownList>

<asp:Button id="Button1"

Text="Apply Image Alignment"

OnClick="Button_Click"

runat="server"/>

</form>

</body>

</html>

五、ImageAlign 枚举

指定图像相对于网页文本的对齐方式。

成员

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