How do you display a list of images, from a folder on hard drive, on ASP.NET website?

Question

I am trying to make a simple photo gallery website. Using ASP.NET and C#. Right now I don't have a server set up but I am just using the development one that Visual Studio Starts when you make a website project and run it.

I have a folder on my hard drive that contains an unknown number of images. I want to write a piece of code that will go through each image and add them to the default webpage. I have tried this code but it doesn't work. What am I doing wrong? Should I be using a ListView control or a DataView or something like that? Do I need to add a virtual directory in order to access the images? If so, how do I to that on this test server?

ALSO, how do I set the position and alignment of these pictures? For example, how would I make it so that the pictures are in a line vertically and centered on the webpage?

protected void Page_Load(object sender, EventArgs e)
{
    string[] filesindirectory = Directory.GetFiles(@"C:\Users\Jordan\Desktop\Web Images");
    int i = 1;
    foreach (string s in filesindirectory)
    {
        Image img = new Image();
        img.ID = "image" + i.ToString();
        img.ImageUrl = s;
        img.Visible = true;
        Page.Controls.Add(img);
        i++;

    }

}

Answer 1

You're creating an <img> element with a URL of C:\Users\Jordan\Desktop\Web Images\SomeImage.jpg. Obviously, that won't work in a web browser.

You should copy the images to a subfolder of your project, and set the URL to a relative URL, like this:

img.ImageUrl = "~/Web Images/" + Path.GetFileName(s);

(Assuming that the Web Images folder is a subfolder of the application root)

Answer 2

As SLaks tells, you need to have your images accessible to the user. By via hosting it on a server or hosting it yourself (obvious).

Answer 3

First you need to place the images you want to display under the web tree. Let's assume you have done that and they are in folder called Images. You can then use a Repeater control to display them by data-binding it like so:

Something like this...

<asp:Repeater ID="RepeaterImages" runat="server">
    <ItemTemplate>
        <asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' />
    </ItemTemplate>
</asp:Repeater>

And then in your code behind:

protected void Page_Load(object sender, EventArgs e)
{
    string[] filesindirectory = Directory.GetFiles(Server.MapPath("~/Images"));
    List<String> images = new List<string>(filesindirectory.Count());

    foreach (string item in filesindirectory)
    {
        images.Add(String.Format("~/Images/{0}", System.IO.Path.GetFileName(item)));
    }

    RepeaterImages.DataSource = images;
    RepeaterImages.DataBind();
}

This basically creates an array of images with their full path from the directory. It then creates a List of strings that contain the virtual path to the image. It then binds that List to the repeater, which displays each item in it's template, which is an Image control which uses the path as the ImageUrl. It's quick'n'dirty, but works and should be a good starting point.