locked
Image not loading on site.master page RRS feed

  • Question

  • User1216627406 posted

    Greetings mates,

    Its been quite a while since I have been here but I am having some really strange issue.

    I am building a master page and when it loads, an image is supposed to load on the header section of the page.

    When I click the design tab of my VS, I can see the image just fine.

    However, when I tried to load it on the browser, the image does not load.

    So far, I have all the files on my local machine.

    Any ideas why this is happening?

    Many thanks in advance.

    <%@ Page Title="Superior Court Alimony and Support Application" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeBehind="Default.aspx.cs" Inherits="Tinder._Default" %>
    
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
        <style type="text/css">
            .style1
            {
                width: 21px;
            }
        </style>
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <h2>
            District Attorney Office URESA Collection System Application
        </h2>
        <table width="833px" border="0" cellpadding="10" cellspacing="15" >
        <tr align="left">
        <td valign="top" colspan="25">
                <asp:LoginView ID="MainLoginView1" runat="server" EnableViewState="false">
                                <AnonymousTemplate>
                                <p> Only authorized users will have access to this application.</p>
                                <p> Please <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> now to access the application.</p>
                                
                                </AnonymousTemplate>
                                <LoggedInTemplate>
                                   <p>Welcome to Tinder Collection System Application. Click on the <b>Search </b>Tab to begin.</p>
                                </LoggedInTemplate>
                </asp:LoginView>
        </td>
        
        <td><asp:Image ID="LogoImage2"  runat="server" 
                ImageUrl="~/Images/logol350.png" AlternateText="" Height="290px" /></td>
        </tr>
        </table>
        <%--<p>
            You must login in to access this application. 
        </p>--%>
        
       
        
    </asp:Content>
    
    
    C#
    namespace Tinder
    {
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    public partial class _Default : Page
    {
        // Fields
        protected LoginView MainLoginView1;
        protected Image LogoImage2;
    
       // Methods
        protected void Page_Load(object sender, EventArgs e)
        {
                string name = User.Identity.Name;
                Session["UserName"] = name;
        }
    }
    }

    Thursday, August 22, 2019 12:59 AM

Answers

  • User475983607 posted

    simflex

    I will check permissions in a few minutes but could it also be possible that the reason they are not rendering is that the default load page is not default.aspx.

    Rather, it is login.aspx.

    The application is configured to redirect unauthorized requests to the login page.  You'll need to allow anonymous access to the default.aspx if you want to allow users to View default.aspx without logging in.

    <configuration>
       <location path="default.aspx">
          <system.web>
             <authorization>
                <allow users="?"/>
             </authorization>
          </system.web>
       </location>
    </configuration>

    Secondly, .aspx page fall under ASP.NET security.  Image files like .png are not automatically secured by ASP.NET security.  You have do something to secure image, js, and CSS files.  Generally, images are secured by implementing an image handler and handlers do fall under ASP.NET security.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 23, 2019 5:00 PM

All replies

  • User288213138 posted

    Hi simflex,

    Is your image placed in the master page ContentPlaceHolder?

    If so, please put the picture outside of it. because these placeholder control define regions where replaceable content will appear.

    The master page code:

    <form id="form1" runat="server">
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">              
                </asp:ContentPlaceHolder>
                <asp:Image ID="LogoImage2"  runat="server" 
                ImageUrl="~/Images/logol350.png" AlternateText="" Height="290px" />
            </div>
        </form>

    Best regards,

    Sam

    Thursday, August 22, 2019 10:22 AM
  • User1216627406 posted

    Sam,

    Thanks very much for your response.

    The image is not place in master page ContentPlaceHolder.

    Rather, it was placed in the default.aspx page which is the code I showed.

    Thursday, August 22, 2019 1:30 PM
  • User753101303 posted

    Hi,

    Use F12 Network to see what happens for this http request (and possibly F12 Elements to inspect your HTML markup). Do you have a 404 not found status for this request ? I often suggest to not start right away by reading your code and trying to guess what happens. Instead use this kind of tools to see first what happens and then look at your code to understand why and fix it.

    Thursday, August 22, 2019 2:48 PM
  • User475983607 posted

    Can you highlight the image?  The shared site.master master markup has an image that is inside the content place holder along with a login control.

        <td><asp:Image ID="LogoImage2"  runat="server" 
                ImageUrl="~/Images/logol350.png" AlternateText="" Height="290px" /></td>

    The shared default.aspx code behind has a field named LogoImage2  too but this field has nothing to do with the master page.  

    protected Image LogoImage2;

    Are you trying to access master page members from the content pages?

    https://www.codeproject.com/Tips/801325/Access-Master-Page-Controls-from-Content-Page-in-C

    Thursday, August 22, 2019 3:06 PM
  • User1216627406 posted

    I have inspected it but on my local machine, I get the following:

    For Login.aspx

    http://localhost:52814/Images/logo64x64Wt.png

    <asp:Image ID="LogoImage1" ImageAlign="AbsBottom" runat="server" ImageUrl="~/Images/logo64x64Wt.png" />&nbsp;

    C#:

    protected Image LogoImage1;

    For default.aspx, I get this:

    http://localhost:52814/Images/logoltgry350.png

        <td class="style1"><asp:Image ID="LogoImage3"  runat="server"
                ImageUrl="~/Images/logoltgry350.png" Height="290px" /></td>
    C#:  

              protected Image LogoImage3;

    For site.Master, I get this

     http://localhost:52814/Images/logoltgry350.png
                
        <td><asp:Image ID="LogoImage2"  runat="server"
                ImageUrl="~/Images/logoltgry350.png" AlternateText="" Height="290px" /></td>
        </tr>

    C#:
        protected Image LogoImage2;

    One thing they all have in common is they start with images as in:

    http://localhost:52814/Images/...

    They are not appending the project name like:

    http://localhost:52814/projectName/Images/...

    However, on the server, it shows the correct url:

    http://servername/projectName/Images/...

    And yes, the images show blank on inspection.

    The other thing to point out is that the url uses 02F in place of forward slash (/).

    I am not sure if that has anything to do with it.

    Many thanks for the responses.
       

       

    Thursday, August 22, 2019 4:18 PM
  • User475983607 posted

    Your response indicates you have several content pages with different LogoImage image controls.  

    Can you explain the design or what you are trying to do?  Do you want to place the image on the master page and reference the image from the content pages?

    Thursday, August 22, 2019 5:49 PM
  • User1216627406 posted

    Yes, of course.

    So, let me explain.

    A user loads the page, there is an image at top left corner of the header page given the way master pages are laid out.

    Then in the body (on left side of the body), there is a log in page.

    To the right of the log in page is another logo.

    I would not have designed it this way. I am just working on someone else's design because I really don't like master pages.

    This site does not allow you to upload images from your PC. As a result, I can't post a screenshot.

    User logs in successfully using active directory validation.

    The issue, I think is that on web.config, we use forms login:

        <authentication mode="Forms">
          <forms loginUrl="~/Account/Login.aspx" timeout="2880"/>
        </authentication>

    So, we use default.aspx as the start page and on this page, we have loginImage2 

        <table width="833px" border="0" cellpadding="10" cellspacing="15" >
        <tr align="left">
        <td valign="top" colspan="25">
                <asp:LoginView ID="MainLoginView1" runat="server" EnableViewState="false">
                                <AnonymousTemplate>
                                <p> Only authorized users will have access to this application.</p>
                                <p> Please <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> now to access the application.</p>
                                
                                </AnonymousTemplate>
                                <LoggedInTemplate>
                                   <p>Welcome the Tinder System.n. Click on the <b>Search </b>Tab to begin.</p>
                                </LoggedInTemplate>
                </asp:LoginView>
        </td>
        
        <td><asp:Image ID="LogoImage2"  runat="server" 
                ImageUrl="~/Images/logoltgry350.png" AlternateText="" Height="290px" /></td>
        </tr>
        </table>

    we have the Log In link on this page so that which when clicked, takes you to login.aspx which has loginImge3.

    So, the same image that displays on default.aspx is also display on login.aspx page.

    We have an existing app which is designed similarly but the images clearly show on that app but not on this one.

    I don't know if it has anything to do with forms authentication being shown on web.config file.

    A bit confusing but I have the context of what we are trying to do is clear.

    Thanks again for your help

    Thursday, August 22, 2019 6:15 PM
  • User475983607 posted

    After reading you responses a few times I think I understand some of the confusion.  The hosted URL is http://servername/projectName/Images while dev is http://localhost:52814/Images/...  This is a host configuration.  Your hosted application is within another application while the dev application is not.  This usually happens when a virtual directory or application is created under the Default site in IIS.  

    I'm not sure if this is part of the issue or not as the image should work as long as you use the "~". which goes to the app root.

    If I understand correctly, the main issue is an image located in the site.master markup is not showing.  Is there anyway you can provide the source code which has the image that does not show?  Or better yet just view the HTML source code from the browser and look at the image source link.  Compare the src to your folder structure.  That would be the fastest way to figure out what's happening.

    Thursday, August 22, 2019 6:57 PM
  • User1216627406 posted

    We are expecting images to load on three different files, master page, login page and default.aspx page.

    master page is supposed to load image1 (logoImage1

    Login.aspx is supposed to load image2 which is same image as the image intended to load on default.aspx expect that they have three different control IDs, logoImage1, logoImage2 and logoImage3.

    The images are not loading on any of the pages.

    Secondly, even though the hosted site is displaying image path correctly, they are not loading there just as they are not loading on the dev site which is my localhost.

    None of the images is loading on any page either in hosted server or local machine.

    Thursday, August 22, 2019 7:33 PM
  • User409696431 posted

    What happens when you append the image url to the site URL on the hosted site?  Does the image load in the browser, or does it give you an access error?

    http://servername/projectName/Images/logoltgry350.png

    And, is projectName defined as the application root?  If not, ~/Images won't work.  (You would not see the correct url, as in the above line, if you view source, if that application root was the problem.)

    Thursday, August 22, 2019 8:36 PM
  • User-1716253493 posted

    Check the image files using image viewer to ensure the files is OK.

    Ensure the images folder is located in the root of the web site.

    Try drag and drop the image into the page, then see what happent in the browser.

    You can modify img src using ~/ format by adding runat="server" for the img tag in master page to make it work for all pages

    Friday, August 23, 2019 1:05 AM
  • User753101303 posted

    It seems you installed your app in a folder which is not marked as an "application root". So ~/ still points to site.com rather than to site.com/AppRootFolder

    In IIS Manager you should have a "Deploy", "Convert to application" options to mark this folder as being an application root:
    https://aspnetfaq.com/convert-a-folder-to-an-application-on-a-remote-iis-host/

    See also https://docs.microsoft.com/en-us/iis/get-started/planning-your-iis-architecture/understanding-sites-applications-and-virtual-directories-on-iis if needed 

    Friday, August 23, 2019 9:15 AM
  • User1216627406 posted

    Thank you guys for your continued support; I really appreciate it.

    Patrice, you asked a great question.

    Here is what happens when I copy the image link to the browser. It doesn't give an error; rather, it gives this:

    First, the actual image link:

    http://serverName/TinderSupport/Images/logoltgry350.png

    Then  it converts it to this:

    http://serverName/TinderSupport/Account/Login.aspx?ReturnUrl=%2fTinderSupport%2fImages%2flogoltgry350.png

    No idea why it converts the link to this.

    One more thing, we always convert to Applications in IIS.

    Also, when I drag the image and drop to the page, in design tab, it shows the image but when run on browser, it just shows the x.

    The weirdest thing is that this app uses master pages which means that image folder, styles folder and js folder are already organized.

    However, this issue is not limited to image problems only. The css (site.css) is not even rendering.

    I am not worried about that now because once the image issue is resolve, that will resolve itself too, I believe.

    Friday, August 23, 2019 1:37 PM
  • User475983607 posted

    The redirect indicates you must login first. 

     Does your project implement an image file handler?  I'm guessing it does.  Login first then try to grab the image with your browser.

    Friday, August 23, 2019 3:12 PM
  • User409696431 posted

    It looks like you may have the Images directory protected by login.  If your CSS is not working, and it is also in a protected directory, that would explain why it won't render.  Those folders need to be allowed to be reached by anonymous users.

    Do the images and CSS work after logging in?

    Friday, August 23, 2019 3:22 PM
  • User1216627406 posted

    Thank you very much Kathy.

    I will check permissions in a few minutes but could it also be possible that the reason they are not rendering is that the default load page is not default.aspx.

    Rather, it is login.aspx.

    I tried setting default.aspx as start page but it doesn't help.

    Friday, August 23, 2019 4:16 PM
  • User475983607 posted

    simflex

    I will check permissions in a few minutes but could it also be possible that the reason they are not rendering is that the default load page is not default.aspx.

    Rather, it is login.aspx.

    The application is configured to redirect unauthorized requests to the login page.  You'll need to allow anonymous access to the default.aspx if you want to allow users to View default.aspx without logging in.

    <configuration>
       <location path="default.aspx">
          <system.web>
             <authorization>
                <allow users="?"/>
             </authorization>
          </system.web>
       </location>
    </configuration>

    Secondly, .aspx page fall under ASP.NET security.  Image files like .png are not automatically secured by ASP.NET security.  You have do something to secure image, js, and CSS files.  Generally, images are secured by implementing an image handler and handlers do fall under ASP.NET security.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 23, 2019 5:00 PM
  • User1216627406 posted

    YES!

    Perfect!!!!

    That did it!!!!!!

    Thank you very much.

    Thanks everyone for your contributions.

    Friday, August 23, 2019 5:28 PM