Get Image in Reports From Database in .NET

Description

This article shows how to get images for a report from a database. I will show how with a demo showing how to fetch the image for your report from the database.

Note: I am assuming that you can create the reports. If you are a beginner to reports then see my earlier article "Getting Started with Reports in .NET".

Use the following procedure to understand this article.

Step 1: I will create a table named "Employee" in my database "Test".

CREATE TABLE [dbo].[Employee](

[Name] [varchar](50) NULL,

[Salary] [int] NULL,

[Emp_Image] varbinary(max)

)

Select the data. After inserting the data, like the name of the employee, salary of the employee and the images of the employee in binary format.

Select * from employee

 

 

NOTE: I am using a single image to explain this article, that will look like:


Step 2: Create a page named "GetData.aspx" with "ScriptManager" from the Ajax Extensions section, "SQLDataSource" from the Data section and "ReportViewer" Control from the Reporting section.

Bind the table columns with "SQLDataSource" to access the data.

Step 3: Add a report named "Image_Report.rdlc" and bind the dataset into the reports using Table.

 

Run the "GetData.aspx" after adding the report named "Image_Report.rdlc" to the "ReportViewer" control.

 

Purpose: I want show the images of employees.

Problem: When I bind the images to the column of a report, that accepts the values as text whereas the images are stored in binary format so a mismatch occurs.

Solution

To resolve this problem I will use an "image" control from the toolbox.

1. Delete the bind value of the image as shown below:
   
   
   
   
2. Put the image control from the toolbox into the column as in the following:
   
   
   
   That populates a properties window of an image to change the properties of the image control.

   Change the "General" properties of the image like:
    

   • Name: Name of the image named "Employee_Image":
     
     
     
     
   • ToolTip: Show the tooltip that can be either text or expression as in the following:
     
     
     
     Note: I am using an expression here where the name will be be displayed.
      
   • Image source: select the source of the image, here the source is "Database" as in the following:
     
     
     
   • Field: Select the name of the field; here the field is "Emp_Image" as in the following:
     
     
      
   • MIME Type: the MIME type of the image, such as JPEG, BMP, GIF and so on.
     
     
     
     Now the general properties will look like this:
     
     
      
3. Now Change the "Size" of the image and display it in the "original size".
   
   
   
   
4. Change the "Border" of the image and select "Outline".
   
   
   
   Click the "OK" button.
   
   
   
   Run the "GetData.aspx" as in the following: