Image Web Server Control Declarative Syntax
Displays a Web-compatible image on the Web Forms page.
<asp:Image
AccessKey="string"
AlternateText="string"
BackColor="color name|#dddddd"
BorderColor="color name|#dddddd"
BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
Inset|Outset"
BorderWidth="size"
CssClass="string"
DescriptionUrl="uri"
Enabled="True|False"
EnableTheming="True|False"
EnableViewState="True|False"
ForeColor="color name|#dddddd"
GenerateEmptyAlternateText="True|False"
Height="size"
ID="string"
ImageAlign="NotSet|Left|Right|Baseline|Top|Middle|Bottom|
AbsBottom|AbsMiddle|TextTop"
ImageUrl="uri"
OnDataBinding="DataBinding event handler"
OnDisposed="Disposed event handler"
OnInit="Init event handler"
OnLoad="Load event handler"
OnPreRender="PreRender event handler"
OnUnload="Unload event handler"
runat="server"
SkinID="string"
Style="string"
TabIndex="integer"
ToolTip="string"
Visible="True|False"
Width="size"
/>
Remarks
Use the Image control to display an image on the Web Forms page. Setting the ImageUrl property specifies the path to the displayed image. You can specify the text to display in place of the image when the image is not available by setting the AlternateText property. The ImageAlign property specifies the alignment of the image in relation to other elements on the Web Forms page.
Note
This control only displays an image. If you want the image to behave like a button or need to determine the coordinates where the mouse pointer is clicked on the image, use the ImageButton control.
Note
Because the <asp:Image> element has no content, you can close the tag with /> instead of using a separate closing tag.
For detailed information on the Image Web server control's properties and events, see the Image documentation.
Example
The following example demonstrates how to create an Image control on a Web page.
Note
The following code sample uses the single-file code model and may not work correctly if copied directly into a code-behind file. This code sample must be copied into an empty text file that has an .aspx extension. For more information on the Web Forms code model, see ASP.NET Web Page Code Model.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Image Example</title>
<script language="VB" runat="server">
Sub Button_Click(sender As Object, e As EventArgs)
Select Case DropList1.SelectedIndex
Case 0:
Image1.ImageAlign = ImageAlign.NotSet
Case 1:
Image1.ImageAlign = ImageAlign.Left
Case 2:
Image1.ImageAlign = ImageAlign.Right
Case 3:
Image1.ImageAlign = ImageAlign.Baseline
Case 4:
Image1.ImageAlign = ImageAlign.Top
Case 5:
Image1.ImageAlign = ImageAlign.Middle
Case 6:
Image1.ImageAlign = ImageAlign.Bottom
Case 7:
Image1.ImageAlign = ImageAlign.AbsBottom
Case 8:
Image1.ImageAlign = ImageAlign.AbsMiddle
Case 9:
Image1.ImageAlign = ImageAlign.TextTop
Case Else:
Image1.ImageAlign = ImageAlign.NotSet
End Select
End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>Image Example</h3>
<div style="font-size:large">
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
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>
<br /><br />
<asp:Button id="Button1"
Text="Apply Image Alignment"
OnClick="Button_Click"
runat="server"/>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Image Example</title>
<script language="C#" runat="server">
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>
<form id="form1" runat="server">
<h3>Image Example</h3>
<div style="font-size:large">
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
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>
<br /><br />
<asp:Button id="Button1"
Text="Apply Image Alignment"
OnClick="Button_Click"
runat="server"/>
</form>
</body>
</html>
<%@ Page Language="JSCRIPT" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Image Example</title>
<script language="JSCRIPT" runat="server">
function Button_Click(sender : Object, e : EventArgs){
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>
<form id="form1" runat="server">
<h3>Image Example</h3>
<div style="font-size:large">
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
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>
<br /><br />
<asp:Button id="Button1"
Text="Apply Image Alignment"
OnClick="Button_Click"
runat="server"/>
</form>
</body>
</html>