In my previous article I explained Display Images from 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.
The complete source code in VB.Net and C# languages is available here
DisplayImages.zip (4.20 kb)