How to Display an Image Using an Image Control in Visual Basic.NET
This tutorial will show you how to display an image with an Image control with the help of a Button control. Images are used everywhere on the internet and play a vital part of a website by either being used for design or to illustrate the meaning of the website to the users. The Image control lets you work with images from server code and displays any valid image supported by the requesting browser on the Web page.
Setting Up
If you have not done so already, create a new web site. To do so, open Visual Studio and click File > New > Web Site. Using ‘Visual Basic’ as the template, select ASP.NET Empty Web Site, name the file ImageControl-VB and click OK. Also, make sure to download the source code as it will contain the image that will be used in this tutorial.
Step One
Right click the web site name and click Add New Item. Using ‘Visual Basic’ as the template, select Web Form, leave the file name as Default.aspx, and click add. Default.aspx will be created and you will see it in source view. Place two Button controls inside the div tags and place an Image control below the second Button control.
Step Two
Switch to design view of Default.aspx and double click the “Show Image” button to create an event handler event in the code behind page. In this event, we will set the visibility of Image1 to true, which will reveal the image on the web form. Now switch back to design view and double click the “Remove Image” button to create an event handler. We will do the opposite and set the visibility of Image1 to false, which will remove the appearance of the image on the web page.
Right click the web site name and click Add New Folder. Name the folder Images, as this will hold the image to be used on the web site. Now right click the folder and click Add Existing Item. Browse to the directory that you saved the source file and add the image “v4 octagon 1.png”. Expand the Images folder and you should now see the “v4 octagon 1.png” image in the folder.
Now click the Image control that we placed in the source view and look in the Properties window. Next to the ‘ImageUrl’ row, click the browse button and a “Select Image” window will appear. Click the Images folder, click the “v4 octagon 1.png” image and click OK. Now next to the ‘Visible’ row, change the property to “False”.
Run the web site and you will see two buttons, “Show Image” and “Remove Image”. Click the “Show Image” button and the image we used for the ImageUrl will appear:
When the “Remove Image” button is clicked, the image will disappear from the page.
Thanks for reading and make sure to download the source files to get a better understanding of how the code works.
ImageControl-VB.zip
Setting Up
If you have not done so already, create a new web site. To do so, open Visual Studio and click File > New > Web Site. Using ‘Visual Basic’ as the template, select ASP.NET Empty Web Site, name the file ImageControl-VB and click OK. Also, make sure to download the source code as it will contain the image that will be used in this tutorial.
Step One
Right click the web site name and click Add New Item. Using ‘Visual Basic’ as the template, select Web Form, leave the file name as Default.aspx, and click add. Default.aspx will be created and you will see it in source view. Place two Button controls inside the div tags and place an Image control below the second Button control.
Code Block
Default.aspx
Place the Image and Button controls in the open div tags.<asp:Button ID="Button1" runat="server" Text="Show Image" />
 
<asp:Button ID="Button2" runat="server" Text="Remove Image" />
<hr />
<asp:Image ID="Image1" runat="server" />
We used over 10 web hosting companies before we found Server Intellect. They offer dedicated servers, and they now offer cloud hosting!
Change the text of Button1 to “Show Image” and Button2 to “Remove Image”. As the names describe, the “Show Image” button will display the image and the “Remove Image” button will remove the image being displayed.Step Two
Switch to design view of Default.aspx and double click the “Show Image” button to create an event handler event in the code behind page. In this event, we will set the visibility of Image1 to true, which will reveal the image on the web form. Now switch back to design view and double click the “Remove Image” button to create an event handler. We will do the opposite and set the visibility of Image1 to false, which will remove the appearance of the image on the web page.
Code Block
Default.aspx.vb
Use the Visible method to display and remove an image.
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Image1.Visible = True
End Sub
Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
Image1.Visible = False
End Sub
We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting!
Step ThreeRight click the web site name and click Add New Folder. Name the folder Images, as this will hold the image to be used on the web site. Now right click the folder and click Add Existing Item. Browse to the directory that you saved the source file and add the image “v4 octagon 1.png”. Expand the Images folder and you should now see the “v4 octagon 1.png” image in the folder.
Now click the Image control that we placed in the source view and look in the Properties window. Next to the ‘ImageUrl’ row, click the browse button and a “Select Image” window will appear. Click the Images folder, click the “v4 octagon 1.png” image and click OK. Now next to the ‘Visible’ row, change the property to “False”.
Code Block
Default.aspx
Add an ImageUrl and change the Visible property to false.<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/v4 octagon 1.png" Visible="False" />
We chose Server Intellect for its cloud hosting, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
OutputRun the web site and you will see two buttons, “Show Image” and “Remove Image”. Click the “Show Image” button and the image we used for the ImageUrl will appear:
When the “Remove Image” button is clicked, the image will disappear from the page.
Thanks for reading and make sure to download the source files to get a better understanding of how the code works.
ImageControl-VB.zip
