How to Display Images from SQL Server Database in ASP .Net Grid View Control

Hello Friends,

                      In this article, I m going to explain how to store images and pictures on disk and their path in Databases with the help of File Upload Control and Also how to Display those Images in Asp.net Grid View Control. The Basic Concept behind This Technique is To Store the Image in a folder that resides in the WebSite Root Directory While the relative path of the images along with the file name is stored in SQL Server Database.

Their are few steps as given below:-

Step 1. First of all Create a database table that will store the image path. the figure below describes the structure of the table:- 

Step2.  Now I’ll add the File upload Control and Button to the .aspx page:-

Step3. Now Create the Images folder to the Website root Directory as follows... 

Step 4. Now Create a Connection String as:-

Step 5. Uploading and storing the image Files:-

                                                                         The Snippet below gets executed when the Upload Button is Clicked. It gets the uploaded image FileName and saves the image in images folder. And then inserts the Image FilePath into the Database. 

 C#

     The data is stored in the Database Table.

Step 6.  Display images in Grid view:-

                                                              Now, The next job is to display the images in Grid View Control . As you can see the below Grid View , I have added 2 bound fields which displays ID and File Name And a Image Field Displays the image based on the image path that comes from the database.

Step 7. The Snippet Given below is used to Display the images in the Grid view Control. As you will notice I m firing a simple select command and the returned datable is then bind to the GridView Control.

C#

The Grid View with images Is Shown as Below:-