In my previous article I explained Display Images from SQL Server Database using ASP.Net


Here I will explain how to display images that are saved outside the the WebSite folder. In that case the images will not be displayed since the ASP.Net  Image Control accepts the elative image path with respect to the Website folder and the images should be stored within the WebSite.

For example if if I have a folder called images within the website folder  i.e. D:\Website\images then relative path of the image will be

 

<asp:Image ID="Image1" runat="server" ImageUrl = "~/images/Test.JPG" />

 

Or the path will be

 

<asp:Image ID="Image2" runat="server" ImageUrl = "images/Test.JPG" />

 

Both of the above will work.


But if the images are stored outside the website folder for example C:\images and my Website in D:\Website


<asp:Image ID="Image1" runat="server" ImageUrl = " C:\images\Test.JPG" />


With the above technique the images will not be displayed.

 

Hence to display images

1.Create a folder within the Website directory.

2. Read the Image into a Byte Stream and write it to the Response.

 

I have saved the following images of three different formats i.e. JPEG, GIF and PNG in the path C:\images

1. TestJPG.jpg

2. TestGIF.gif

3. TestPNG.png

 

 

Read the Images

 

To retreive pictures from image folder and display it I have created a Image Page whose job will be to receive FileName which is the name of the image file to be displayed.

Based on the File Name, the page will retreive the image from the path and convert and write it to the Response. Refer the Code Below

 

      

 

C# [ImageCSharp.aspx]

 

 

protected void Page_Load(object sender, EventArgs e)

{

if (Request.QueryString["FileName"] != null)

{

    try

    {

        // Read the file and convert it to Byte Array

        string filePath = "C:\\images\\";

        string filename = Request.QueryString["FileName"];

        string contenttype = "image/" +

        Path.GetExtension(Request.QueryString["FileName"].Replace(".","");

        FileStream fs = new FileStream(filePath + filename,

        FileMode.Open, FileAccess.Read);

        BinaryReader br = new BinaryReader(fs);

        Byte[] bytes = br.ReadBytes((Int32)fs.Length);

        br.Close();

        fs.Close();

 

        //Write the file to response Stream

        Response.Buffer = true;

        Response.Charset = "";

        Response.Cache.SetCacheability(HttpCacheability.NoCache);

        Response.ContentType = contenttype;

        Response.AddHeader("content-disposition", "attachment;filename=" + filename);

        Response.BinaryWrite(bytes);

        Response.Flush();

        Response.End();

    }

    catch

    {

    }

}

}

 

 

           

VB.Net [ImageVB.aspx]

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

Handles Me.Load

 If Request.QueryString("FileName") IsNot Nothing Then

   Try

      ' Read the file and convert it to Byte Array

      Dim filePath As String = "C:\images\"

      Dim filename As String = Request.QueryString("FileName")

      Dim contenttype As String = "image/"

      & Path.GetExtension(filename).Replace(".", "")

 

      Dim fs As FileStream = New FileStream(filePath & filename,

      FileMode.Open, FileAccess.Read)

     

      Dim br As BinaryReader = New BinaryReader(fs)

      Dim bytes As Byte() = br.ReadBytes(Convert.ToInt32(fs.Length))

      br.Close()

      fs.Close()

 

      'Write the file to Reponse

      Response.Buffer = True

      Response.Charset = ""

      Response.Cache.SetCacheability(HttpCacheability.NoCache)

      Response.ContentType = contenttype

      Response.AddHeader("content-disposition", "attachment;filename=" & filename)

      Response.BinaryWrite(bytes)

      Response.Flush()

      Response.End()

      Catch

 

      End Try

 

 

 End If

End Sub

 

 

          

Display Images

 

To Display the image on the aspx page I have used ASP.Net Image Control refer below.

 

<asp:image ID="Image4" runat="server" ImageUrl ="ImageCSharp.aspx?FileName=TestJPG.jpg"/>

<asp:image ID="Image5" runat="server" ImageUrl ="ImageCSharp.aspx?FileName=TestGIF.gif"/>

<asp:image ID="Image6" runat="server" ImageUrl ="ImageCSharp.aspx?FileName=TestPNG.png"/>

 

 

<asp:image ID="Image4" runat="server" ImageUrl ="ImageVB.aspx?FileName=TestJPG.jpg"/>

<asp:image ID="Image5" runat="server" ImageUrl ="ImageVB.aspx?FileName=TestGIF.gif"/>

<asp:image ID="Image6" runat="server" ImageUrl ="ImageVB.aspx?FileName=TestPNG.png"/>

 

As you will notice above I am passing URL of the ImageCSharp.aspx (C# Version) and the ImageVB.aspx (VB.Net Version)
which accepts the Image FileName as the QueryString Parameter.


The figure below displays the how the Images are displayed.



Images displayed using Byte Stream

The complete source code in VB.Net and C# languages is available here



DisplayImages.zip (4.20 kb)