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

Turn off the feature of map scrolling on OpenStreetMaps

Is there a way to prevent mouse interactions and scrolling in an open maps iframe? I have already tried adding the attribute scrollwheel="false" to no avail. Are there any CSS methods to achieve this? <iframe id= "mapsource" scrollwheel="false" src="ht ...

How come the mouseover effect on the div remains even after the mouse has been removed?

How can I keep the original CSS class when the mouse moves away? function highlight( x, y) { var sel=document.getElementById(y); sel.style.borderBottom= "2px solid "+x; sel.style.opacity="1"; sel.style.transition="all eas ...

Is it better to apply the font-family to the body or to the html element?

Is it more appropriate to specify the font-family CSS property on the html element or the body element? html { font-family: sans-serif; } or body { font-family: sans-serif; } I've looked into this issue online, but there doesn't seem to ...

Best practices for integrating text and images within a website header using CSS and HTML

I need help figuring out the most efficient method for creating a page header that showcases an image while keeping the text visible for search engines and in case the image fails to load. According to Google, it is recommended to use a <div> for th ...

`Text-overflow ellipsis should function consistently across both Firefox and Chrome browsers`

A design has been created to showcase captions for articles and their respective statuses. The article name box has a fixed width, with text-overflow:ellipsis applied to trim excessively long names. Additionally, a light grey dotted line is added at the en ...

Tips for enhancing image resolution when converting from canvas toDataURL

After grabbing an image from a DIV with HTML2CANVAS, I noticed that the image quality is disappointingly poor and pixelated. The resolution of the captured image is only 96 dpi. Is there a way to boost the resolution for a clearer, high-quality image? Cou ...

Ensure that the height of the content in JQuery Mobile is set to 100

I'm currently working on an app using JQuery Mobile. Check out this link for my HTML code. There's a full-screen <iframe> within my page. Even though I've specified width:100%; height:100%; border:0% for the iframe, it ends up being ...

Updating the ContextKey of the DynamicPopulateExtender based on the selected value from a DropDownList dynamically

I am facing an issue with my DynamicPopulateExtender control. I need it to render HTML based on the value of an asp:DropDownList. The problem lies in writing the JavaScript code that can fetch the dropdown value, assign it to the DynamicPopulate control&ap ...

I am facing an issue with calling a controller from an HTTP GET request in ASP.Net Core 6 using a Single Page Application (SPA) endpoint

[UNSOLVED] - Seeking help from developers [Issue] As a newcomer to the industry, I apologize for my lack of experience in advance. I am currently facing a challenge with ASP.Net Core 6 and it seems like I am missing something simple, but I can't see ...

What is the difference between class at DOM and className at component?

When passing the className props to the child component, sometimes the className for the active link is not correctly reflected in the DOM element during production: The child component (Link) receives the className prop for the active link from the paren ...

Creating a fixed sidebar in Bootstrap 3 that spans the full width of the column

I'm working with two columns - col-md-8 and col-md-4. In the second column, I have a fixed sidebar that I want to be 100% width of the col-md-4 column. The black box in the image below represents the second column. Despite trying setting the width to ...

What makes the element[class=noquotes] function so effective?

According to the MDN attribute selector in CSS, it has the following syntax: div[attr="actualValue"] For example: <div class="test"></div> div[class="test"] However, I have observed that the quotes around the test are not necessary as show ...

Container Based Absolute Positioning in Bootstrap

I am struggling with aligning text properly within a container. I want it to look like the image, but the text keeps ending up at the far right side of the page. Could you assist me in achieving this? Thank you! HTML: <header> <div class="c ...

Exploring Vaadin 14 Slider Components

I'm looking for help on how to incorporate a slider into my Vaadin 14 project. I discovered that the slider component was removed in Vaadin 10, so I turned to this alternative: Once I added the Maven dependency and repository to my pom.xml, I success ...

The behavior of subscribing to HttpApplication events within HttpModules varies between Integrated mode and Classic mode

Observing peculiar behavior in the event handling process within the same HttpApplication instance and its subscribed HttpModules, especially when they use the same event handler during initialization, I noticed a difference between IntegratedMode and Clas ...

Decoding JSON Array Data Sent via Ajax请求

Could someone provide guidance on parsing this Ajax response in jQuery? {"d":{"__type":"ListUsers+returnData","Type":"Success","Message":"User Added successfully."}} I am utilizing identical return types for various return data scenarios. ...

Make the div block fill the entire body by setting its width to 100%

I am attempting to make the center block (which has a grey background) expand to the edges of the browser. By utilizing the code below, I have been successful in achieving this: #aboutBlock { background: #f2f2f1; position:absolute; left:0; ...

Are the JQuery appended elements exceeding the width of the parent div?

I have an HTML div that is styled using the Bootstrap class span9. <div class="span9"> <div id = "selectedtags" class="well"> </div> <button class="btn" type="button" id="delegatecontent">Generate report</button&g ...

Checking for the existence of the reader object in .Net using HTML. The function will return true if the object

Currently, I am utilizing a DataList to display data retrieved from the database and populating the fields on the HTML side. However, I now face a new task where I need to modify the visibility of a panel based on whether a database field contains data or ...

Unable to modify the main button color using LESS in the ant.design framework

I am experiencing an issue with using ant design to style a primary button. I have tried to change the background color using LESS, specifically by setting @btn-primary-bg: #1B2F55, but for some reason, it does not work. I know I could easily change the ba ...