Introduction to ASP.NET Image

An ASP.NET Image server control is a control that displays an image on the web page. The image is sourced from either a location on the server or from a URL on the internet. Why did I use the term server control? Well, because like all other server controls, ASP.NET provides its own tag for the Image control which is run at the server and the generated HTML code is returned as a response to the browser. So, thinking from the HTML perspective, the Image control generates the HTML <img> tag along with the attributes such as source, height, width, styles, etc.

ASP.NET Training (8 Courses, 19 Projects)
9 Online Courses | 19 Hands-on Projects | 120+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (21 ratings)

View Course

Syntax

The Image control can either be coded using ASP.NET provided tags or dragged and dropped using Visual Studio IDE. The drag and drop feature ultimately generates the same code. The syntax of ASP.NET Image in its simplest form is:

<asp:Image ID="ImageId" runat="server" />

You can drag and drop the Image control from the toolbox pane in Visual Studio:

Code:

<asp:Image ID="Image_Win_Walp" runat="server"
Height="200" Width="300"
ImageUrl="~/Content/win.jpg"
ImageAlign="Right"
AlternateText="Windows Logo" />

Output:

Behind the Scenes

So, how does the Image control work? When the ASP.NET engine encounters the control, it adds the equivalent HTML tag in the response with its src property set to the relative location on the server or the absolute URL on the internet. If there is no ImageURL provided in the ASP.NET tag, the src attribute remains unset and thus no image is displayed on the web page.

Note: Image control only displays the image on the web page. If you want to make the image interactive by letting users perform actions on clicks and double clicks of the image, use ImageButton control provided by ASP .Net.

Properties of ASP.NET Image

The ASP.NET Image control comes with certain pre-defined properties. These properties are converted to attributes in the native HTML code. They help define additional behavior for the Image control. Let’s discuss some of the frequently used ones in detail:

1. AlternateText

This property gets or sets the alternate text to be displayed in case the image could not be loaded into the web page. There are multiple reasons due to which an image may not load. The image may not be found at the path, the server may be down, the connection may be poor or some other error.

<asp:Image ID="myFlowerImage" AlternateText="Flower Image" runat="server" />

2. BorderColor, BorderStyle and BorderWidth

These properties get or set the border styling for the control.

<asp:Image ID="myFlowerImage" BorderWidth="5" BorderColor="Blue"
BorderStyle="dashed" runat="server" />

3. CssClass

This property gets or sets the CSS class to be applied to the control.

<asp:Image ID="myFlowerImage" CssClass="txtBxClass" runat="server" />

4. DescriptionUrl

This property gets or sets the location that contains a detailed description of the image.

<asp:Image ID="myFlowerImage" DescriptionUrl="~/Content/myImgDes.txt" runat="server" />

5. Enabled

This property gets or sets the value indicating whether the control is enabled or disabled. The default value is true.

<asp:Image ID="myFlowerImage" Enabled="false" runat="server" />

6. Font

This property gets or sets the font of the text to be displayed with the control. There are plenty of styles and options such as bold, italics, underline, strikeout, etc.

7. Height, Width

These properties get or set the height and width of the image in the number of pixels.

<asp:Image ID="myFlowerImage" Height="100" Width="500" runat="server" />

8. ID

This property gets or sets the unique identifier attribute to the control.

<asp:Image ID="myFlowerImage" runat="server" />

9. ImageUrl

This property gets or sets the source path of the image. All valid image formats such as jpg, jpeg, png, bmp, etc. are supported.

Note: The complete path is case-sensitive.

<asp:Image ID="myFlowerImage" ImageUrl="~/Content/myFlowerImage.jpg" runat="server" />

10. ImageAlign

This property gets or sets the position of the image with respect to other controls on the web page. It can be right, left, center, top, bottom, middle, etc.

<asp:Image ID="myFlowerImage" ImageAlign="Right" runat="server" />

11. ToolTip

This property gets or sets the tooltip value to be displayed when the mouse pointer has hovered over the link button.

<asp:Image ID="myFlowerImage" ToolTip="This is an image of a flower." runat="server" />

12. Visible

This property determines whether the control will be displayed on the UI or hidden. The default is true.

<asp:Image ID="myFlowerImage" Visible="false" runat="server" />

Examples to Implement ASP.NET Image

Let us create an Image control in a sample application step by step.

Step 1. Create a new ASP.NET WebApplication project. This will create a shell template with a working application with a Default.aspx page.

Step 2. Insert an image in the application by browsing in your local machine.

For this example, I added the image of the Windows logo to the application’s content folder. Now the relative path of the image inside the content folder would be referenced in the Image control.

Step 3. Go to the Default.aspx file and remove the contents of the shell template. Paste the following code: