locked
Site.master renders different for pages in root directory vs. pages in a folder. RRS feed

  • Question

  • User-1035489207 posted

    I am working with the stock vb.net web forms template in VS 2017.  I have added a logo to the navbar and adjusted the line height setting of the navbar to accomodate the logo as shown below:

    In bootstrap.css file:

    /*Changing the line height here changes the height of the navbar to accommodate the logo.  The original setting was 20*/
    .navbar-nav > li > a {
      padding-top: 10px;
      padding-bottom: 10px;
      line-height: 50px;

    The logo and navbar look great on the default page or any page in the root directory.  However, pages in the "Account" directory do not render properly and a broken image link is shown.  I have the image in my Images folder in the root directory and pages in the root directory or not are using ~/Site.Master as the masterpagefile  What am I missing?

    Tuesday, June 25, 2019 12:59 PM

Answers

  • User475983607 posted

    This symptom usually indicates an absolute reference to the image.   Use a relative reference.

    https://www.w3schools.com/html/html_filepaths.asp

    If you are using the Image Server control then use the tilde (~) to 

    <asp:Image ID="Image1" ImageUrl="~/Content/myimage.png" runat="server" />

    You should be able to find other tilde examples in the current master page.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 1:07 PM
  • User-1035489207 posted

    Nevermind the previous comment.  I got it from the link you sent.  The below code did the trick.

    <%--Below adds a logo to the navbar--%>
    <a href="/" class="navbar-brand">
       <img src="../Images/Version7.png"  height="50"/>
    </a>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 1:48 PM

All replies

  • User475983607 posted

    This symptom usually indicates an absolute reference to the image.   Use a relative reference.

    https://www.w3schools.com/html/html_filepaths.asp

    If you are using the Image Server control then use the tilde (~) to 

    <asp:Image ID="Image1" ImageUrl="~/Content/myimage.png" runat="server" />

    You should be able to find other tilde examples in the current master page.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 1:07 PM
  • User-1035489207 posted

    Changing it to a relative reference as shown below breaks the link on all pages not just the ones in the root directory.  I got this link by changing the image url on a separate image control to the image that I am wanting in the navbar.

    <%--Below adds a logo to the navbar--%>
    <a href="/" class="navbar-brand">
     <img src="~/Images/Version7.png"  height="50"/>
    </a>

    This way works but only on pages in the root directory:

    <%--Below adds a logo to the navbar--%>
    <a href="/" class="navbar-brand">
       <img src="Images/Version7.png"  height="50"/>
    </a>

    See the next comment......

    Tuesday, June 25, 2019 1:44 PM
  • User-1035489207 posted

    Nevermind the previous comment.  I got it from the link you sent.  The below code did the trick.

    <%--Below adds a logo to the navbar--%>
    <a href="/" class="navbar-brand">
       <img src="../Images/Version7.png"  height="50"/>
    </a>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 1:48 PM
  • User475983607 posted

    Changing it to a relative reference as shown below breaks the link on all pages not just the ones in the root directory.  I got this link by changing the image url on a separate image control to the image that I am wanting in the navbar.

    <%--Below adds a logo to the navbar--%>
    <a href="/" class="navbar-brand">
     <img src="~/Images/Version7.png"  height="50"/>
    </a>

    You did NOT follow the instructions in my post or the linked document. 

    In order to use an HTML element you'll need to either use a relative reference as explained in the W3C link...

    <img src="/Images/Version7.png"  height="50"/>

    Or use the tilde if your application is a sub application of default in local IIS.

    <img src=<%=ResolveClientUrl("~/Images/Version7.png")%>  height="50"/>

    https://docs.microsoft.com/en-us/aspnet/web-forms/overview/older-versions-getting-started/master-pages/urls-in-master-pages-cs

    IMHO, it's best to use a server control as illustrated in my first post.

    Tuesday, June 25, 2019 1:55 PM
  • User475983607 posted

    Nevermind the previous comment.  I got it from the link you sent.  The below code did the trick.

    <%--Below adds a logo to the navbar--%>
    <a href="/" class="navbar-brand">
       <img src="../Images/Version7.png"  height="50"/>
    </a>

    This solution will not work reliably.   

    Tuesday, June 25, 2019 1:56 PM