Image Control in ASP.NET

The ASP.NET Image control is a powerful tool for displaying images on a web page in an ASP.NET application. It provides various features and properties to customize the appearance and behavior of the displayed images.

Image control

To use the Image control, you need to add it to your ASP.NET markup (e.g., in an .aspx file) and specify the source of the image using the ImageUrl property. Here's an example:

<asp:Image ID="imgExample" runat="server" ImageUrl="~/Images/example.jpg" />

In this example, the Image control with the ID "imgExample" is set to display the image located at the "~/Images/example.jpg" path.

image-control

AlternateText property

The Image control also supports alternative text through the AlternateText property, which provides a textual description of the image for accessibility purposes. This text is displayed when the image fails to load or when the user is utilizing assistive technologies. Here's an example:

VB.Net
Image1.AlternateText = "Net-informations.com Logo"
C#
Image1.AlternateText = "Net-informations.com Logo";

Dynamic modification

In addition to the basic properties, the Image control allows for dynamic modification of its properties through server-side code. For example, you can change the ImageUrl property programmatically based on certain conditions. Here's an example in C#:

protected void Page_Load(object sender, EventArgs e) { if (someCondition) { imgExample.ImageUrl = "~/Images/example1.jpg"; } else { imgExample.ImageUrl = "~/Images/example2.jpg"; } }

This code demonstrates how you can change the ImageUrl property of the Image control dynamically based on the value of a condition.

The Image control supports various events such as Click, MouseOver, and MouseOut, allowing you to perform actions or trigger server-side code when the user interacts with the image. Here's an example:

<asp:Image ID="imgExample" runat="server" ImageUrl="~/Images/example.jpg" OnClick="imgExample_Click" />

In this example, the OnClick event is wired up to the "imgExample_Click" method in the server-side code. When the user clicks on the image, the specified method is executed.

The following ASP.NET program load an Image from a URL and set an alternate text.

Default.aspx

<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Image ID="Image1" runat="server" /> </div> </form> </body> </html>
Full Source | C#
using System; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Image1.ImageUrl = "https://net-informations.com/logo.png"; Image1.AlternateText = "Net-informations.com Logo"; } }
Full Source | VB.NET
Partial Class _Default Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Image1.ImageUrl = "https://net-informations.com/logo.png" Image1.AlternateText = "Net-informations.com Logo" End Sub End Class

Conclusion

The ASP.NET Image control offers a convenient and flexible way to display images on web pages in an ASP.NET application. It provides various properties and events to control the image's appearance, behavior, and interactivity, making it a valuable component for creating visually engaging and interactive web applications.






Related Topics
  1. ASP.NET Label Control
  2. ASP.NET Button Control
  3. Asp.Net Textbox Control
  4. ASP.NET DropDownList Control
  1. ASP.NET Listbox Control
  2. ASP.NET Checkbox Control
  3. ASP.NET RadioButton Control
  4. ASP.NET LinkButton Control
  5. ASP.NET Calander Control
  6. ASP.NET Treeview Control