Displaying images dynamically in a gridview from a hard drive source

I am facing an issue trying to dynamically retrieve an image from my hard drive. Despite creating the dynamic path correctly, the image is not displaying.

The root cause of this problem lies in the fact that I am developing a back-end system for a website. The backend will reside on the same hard drive but it needs access to images uploaded by users.

This functionality is essential for us to review user uploads before making them live on the website.

Although I initially used this code on the main site and modified it for the backend, it seems to be non-functional.

Upon page display, the image fails to load. However, if I right-click on the area where the image should appear, I can copy the link and manually enter it into the address bar to view the image. It's quite perplexing!

I would greatly appreciate if someone could take a look at my code and pinpoint where I might be going wrong.

Here is the snippet of code:

<div class="panel panel-default" style="background-color: #f3f3f3;">
    <div class="panel-body">
        <asp:DataList ID="_propertyImagesList" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" CellPadding="16">
            <ItemTemplate>
                <div class="popup-gallery">
                  <a id="imageLink" href='<%# Eval("ImagePath","file:///C:/Development/main website/main website/PropertyImages/{0}") %>' runat="server" class="thumbnail" style="margin: 10px; min-height: 140px; min-width: 140px;">
                      <asp:Image ID="_propertyImage" ImageUrl='<%# Bind("ThumbPath", "file:///C:/Development/main website/main website/PropertyImages/{0}") %>' runat="server" CssClass="img-responsive" />
                  </a>
                </div>
            </ItemTemplate>
        </asp:DataList>
    </div>
</div>

c#

    protected void GetPropertyImages(int propertyId)
    {
        SqlCommand cmd = new SqlCommand("GetPropertyImages", conn);
        cmd.CommandType = System.Data.CommandType.StoredProcedure;

        SqlDataReader rdr;

        cmd.Parameters.Add("@PropertyId", System.Data.SqlDbType.Int).Value = propertyId;

        conn.Open();
        rdr = cmd.ExecuteReader();

        _propertyImagesList.DataSource = rdr;
        _propertyImagesList.DataBind();

        rdr.Close();
        conn.Close();
    }

Answer №1

My approach to handling projects involves incorporating code that I have successfully implemented on numerous occasions. Although untested, there may be a couple of adjustments needed to customize it for your specific setup. Assuming that C:\Development\main website\main website serves as the root directory of your website.

Note: I also took the liberty to modify the ID of the DataList in accordance with Resharper's naming conventions.

<asp:DataList ID="PropertyImageList" runat="server" OnItemDataBound="PropertyImageList_ItemDataBound" RepeatColumns="4" RepeatDirection="Horizontal" CellPadding="16">
    <ItemTemplate>
        <div class="popup-gallery">
            <asp:HyperLink runat="server" ID="PropertyImageLink" CssClass="thumbnail" Style="margin: 10px; min-height: 140px; min-width: 140px;">
                <asp:Image runat="server" ID="PropertyImage" CssClass="img-responsive" />
            </asp:HyperLink>
        </div>
    </ItemTemplate>
</asp:DataList>

C#

protected void PropertyImageList_ItemDataBound(object sender, DataListItemEventArgs e)
{
    var data = e.Item.DataItem as DbDataRecord;
    if (data == null)
        return;

    var link = e.Item.FindControl("PropertyImageLink") as HyperLink;
    var image = e.Item.FindControl("PropertyImage") as Image;

    if (link == null || image == null)
        return;

    image.ImageUrl = "~/PropertyImages/" + data["ImagePath"];
    link.NavigateUrl = "~/PropertyImages/" + data["ThumbPath"];
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unlocking the Possibilities of scroll-snap-type

My goal is to effectively utilize the scroll-snap-type property I'm struggling to understand why this code functions as intended html, body { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start none; border: 3px dashed blac ...

Revert button design to default after second click

Looking for some assistance here. I have a button that toggles between displaying and hiding information. When the information is displayed, it should have one style, and when it's hidden, it should have another. Currently, I'm able to change the ...

Should the JSON data in an ASP.NET React application be serialized and normalized on the client-side or server-side?

Currently, I am in the process of developing a asp.net react application. Up until now, I have successfully completed the serialization and normalization of nested data on the client-side using normalizr. However, I am considering whether it would be more ...

How to Maintain Spacing Between Two Elements While Ensuring the Right Element Stays to the Right Even if the First One is Hidden in CSS

Presently, I have two icons being displayed with a space between them using the flex-box property justify-content and value space-between. The issue arises when only one icon is displayed, as I need the V-icon to always remain on the left and the urgent-ic ...

Is it necessary to mark all checkboxes in the initial column of the gridview?

I have encountered an issue with my code that checks all checkboxes in the first column of a gridview. It seems to work only for Internet Explorer versions 5.0 to 8.0, but gives a Javascript error when running on IE 9 and above stating "Function Expected ...

Discover the way to create an HTML button with a mesmerizing transparent effect

For my website creation using Dreamweaver, I came up with the idea of utilizing Photoshop to design backgrounds. The reasoning behind this choice was that if I needed to modify button names at any point, I could simply edit the code and make the necessary ...

Loop a background image around a header that is centered in the design

I'm having an issue with creating a header with fixed dimensions and aligning it center on my webpage. I want to have small 1 px images repeat along the remaining width of the header from each edge of the main image. However, when I try to repeat the ...

Filtering database records using a static dropdown list in MVC 5: A step-by-step guide

Is there a way to filter database records based on the columns QtyRecieved, QtyRecievedand Void using a static HTML dropdown list? The QtyRecieved and QtyRecievedand column are both decimal values, while Void is a boolean. This is what I have attempted: ...

I have a question regarding the CSS universal selector

I've been working on developing a website, but I'm having trouble with the universal selector. No matter how many times I try, it just won't work. If you'd like to see an example of what I'm dealing with, check out this link: https ...

Using AJAX to Access PHP Variables

I am working on creating a progress bar and have the following CSS code: #result{ background:#8c8f91; margin-left: 15px; margin-right: auto; table-layout: fixed; border-collapse: collapse; z-index: -1; position:relative; width: ...

Fixed Positioning Div to Stay at the Top while Scrolling

Currently, I have successfully implemented the functionality to stick the div to the top once it scrolls down by 320px. However, I am curious if there is an alternative approach to achieving this effect. Below is the code snippet I am using: jQuery(functi ...

Bootstrap select box gracefully fits within a dynamically adjusting height div

Can someone help me troubleshoot the issue with displaying/overflowing the .drop-down outside of the .item box in this demo? I need to keep the height of the .item as auto but for some reason, I can't enable overflow visible on it. .item{ backg ...

What is a way to create a colored <hr> element without increasing its height at all?

I'm facing a dilemma - I created an hr element and it's currently grey, but I want to change the color to black. The issue is that when I do this, it appears thicker and ruins the overall styling of my page. Does anyone have any ideas on how I ca ...

Placing the video at the center of the background image

                    Can someone assist me with a design issue I'm facing? I have two divs within a section. The left div contains a heading and a button, while the right div contains a video. However, when I try to add a background image to ...

Ways to incorporate a tertiary tier in my CSS dropdown navigation

I currently have a CSS code that displays a two-level menu, but I'm looking to expand it to include a third level. Unfortunately, I'm stuck and unsure of what changes to make in the CSS. Below is the existing code: #topnav{ // Existing CSS p ...

How can I make this div appear on the screen?

I have recently encountered an issue with a navbar on my webpage. Despite adding all the necessary links, one of them mysteriously disappears from view. It seems to be present when inspected in the console, but it just won't display on the front end. ...

What is the best way to target the shadow DOM host element specifically when it is the last child in the selection?

I want to style the shadow DOM host element as the last child. In this particular situation, they are currently all green. I would like them to be all red, with the exception of the final one. class MyCustomElement extends HTMLElement { constructor() ...

Guidelines for accessing the value of the parent function upon clicking the button within the child function?

I have a pair of buttons labeled as ok and cancel. <div class="buttons-div"> <button class='cancel'>Cancel</button> <button class='ok'>Ok</button> </div> The functions I am working wi ...

How can I select elements in CSS that are "between x and y"?

If I have an HTML table with 20 rows and 3 columns (20x3), I am looking to highlight the rows from 7 to 12 in red. What CSS selector should I use for this specific task? How can I define the range of rows to be styled as "between"? ...

Toggle the visibility of a div based on the id found in JSON data

I am looking to implement a JavaScript snippet in my code that will show or hide a div based on the category ID returned by my JSON data. <div id="community-members-member-content-categories-container"> <div class="commun ...