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

 
table 

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

single image
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.

SQLDataSource

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

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

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:

    Delete the bind value of image

  2. Put the image control from the toolbox into the column as in the following:

    toolbox

    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":

      Name

    • ToolTip: Show the tooltip that can be either text or expression as in the following:

      ToolTip

      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:

      Image source
    • Field: Select the name of the field; here the field is "Emp_Image" as in the following:

      Field
       
    • MIME Type: the MIME type of the image, such as JPEG, BMP, GIF and so on.

      MIME Type

      Now the general properties will look like this:

      properties
       
  3. Now Change the "Size" of the image and display it in the "original size".

    original size

  4. Change the "Border" of the image and select "Outline".

    Border

    Click the "OK" button.

    Table Data

    Run the "GetData.aspx" as in the following:

    Run