Search code examples
webformsmaster-pages

master page logo not displaying on new web form within subfolder


I am new to masterpages so bear with me if this is a stupid question. I have a master page that has the company logo image on the top of the menu bar. I created a new web form with master page. After I created the new page I moved it into a subfolder called berkeley_heights. When I view the page in chrome it shows the menu bar but not the logo image above the menu bar. How do I resolve this issue.

Solution Explorer screen shot showing sub folder location:Solution Explorer

Screen shot showing new web form without logo image: image error

masterpage:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="OnCallWeb.MasterPage" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Union County Dispatch Website</title>
    <link rel="stylesheet" href="MenuStyle.css" />
    <style>
        body {
            background-color:gainsboro;
            background-size:cover;
            background-attachment:fixed;
        }

    </style>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <nav>
                <div><img src="img/WebsiteLogo3Transparent.png" /></div>
                <label class="toggle" for="drop">Menu</label>
                <input type="checkbox" id="drop" />

                <ul class="menu">
                    <li><a href="#">Main Menu</a>
                        <ul>
                            <li><a href="#">911 Calltaking Polices</a>
                                <ul>
                                    <li><li>
                                    <li><a href="#">County Police</a></li>

New Web Form with Masterpage ("bh_main_page.aspx)

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="bh_main_page.aspx.cs" Inherits="OnCallWeb.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    <style type="text/css">
    .auto-style1 {
        text-align: center;
    }
    .auto-style2 {
        text-align: center;
        font-size: large;
    }
    .auto-style3 {
        font-size: x-large;
        color: #006666;
    }
</style>
    <div style="font-family: Arial, Helvetica, sans-serif">

Solution

  • Could it be a relative path issue? i.e. Your logo's src is "img/WebsiteLogo3Transparent.png" - that'll show on the home page. e.g. www.site.com/img/WebsiteLogo3Transparent.png

    Once the page calling the MasterPage is in a subfolder, the browser expects that subfolder to have a folder called "img" within it. e.g. www.site.com/subfolder/img/WebsiteLogo3Transparent.png

    Test this by adding domain to the source or change the image tag to

    <img src="~/img/WebsiteLogo3Transparent.png" runat="server" />"