Image Class (System.Web.UI.WebControls)

Switch View :

Classic

Lightweight

ScriptFree

Site Feedback

Image Class

Displays an image on a Web page.

Namespace: System.Web.UI.WebControls
Assembly: System.Web (in system.web.dll)

Syntax

Visual Basic (Declaration)

Public Class Image
	Inherits WebControl

Visual Basic (Usage)

Dim instance As Image

public class Image : WebControl

C++

public ref class Image : public WebControl

public class Image extends WebControl

JScript

public class Image extends WebControl

XAML

Not applicable.

Remarks

Use the Image control to display any valid image supported by the requesting browser on the Web page. The path to the displayed image is specified by setting the ImageUrl property. You can specify the text to display in place of image when the image is not available by setting the AlternateText property. The alignment of the image in relation to other elements on the Web page is specified by setting ImageAlign property.

Note:
This control only displays an image. If you need to capture mouse clicks on the image, use the ImageButton control.

Accessibility

The markup rendered by default for this control might not conform to accessibility standards such as the Web Content Accessibility Guidelines 1.0 (WCAG) priority 1 guidelines. For details about accessibility support for this control, see ASP.NET Controls and Accessibility.

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.

Visual Basic

<%@ 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>

JScript

<%@ 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>

.NET Framework Security

AspNetHostingPermission for operating in a hosted environment. Demand value: LinkDemand. Permission value: Minimal.
AspNetHostingPermission for operating in a hosted environment. Demand value: InheritanceDemand. Permission value: Minimal.

Inheritance Hierarchy

System.Object
   System.Web.UI.Control
     System.Web.UI.WebControls.WebControl
      System.Web.UI.WebControls.Image
         System.Web.UI.WebControls.ImageButton
         System.Web.UI.WebControls.ImageMap

Thread Safety

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

Platforms

Windows 98, Windows Server 2000 SP4, Windows Server 2003, Windows XP Media Center Edition, Windows XP Professional x64 Edition, Windows XP SP2, Windows XP Starter Edition

The Microsoft .NET Framework 3.0 is supported on Windows Vista, Microsoft Windows XP SP2, and Windows Server 2003 SP1.

Version Information

.NET Framework

Supported in: 3.0, 2.0, 1.1, 1.0

Reference

Image Members
System.Web.UI.WebControls Namespace
ImageUrl
AlternateText
ImageAlign

Other Resources

Image Web Server Control
Securing Standard Controls

Community Content

Michael Freidgeim

Add a hyperlink to an image

If you want to add a hyperlink to an image, use the ImageUrl property of the HyperLink webcontrol.
Alternatively includes a hyperlink that surrounds the asp:Image as shown in http://blogs.msdn.com/robburke/archive/2006/10/05/ASP.NET-2.0-Quick-Tip_3A00_-Add-a-hyperlink-to-an-image-in-a-GridView-column.aspx