tags:

views:

76

answers:

3
Q: 

Master page image doesn't display on content page

I have an image on my master page like this:

<img src="../Images/logo.jpg" />

The master page lies in Root/MasterPages/masterpage.master

Now this image is displayed in a content page which is in Root/SomeDir/ContentPage.aspx, but it doesn't work in a content page which is in Root/SomeDir1/SomeDir2/ContentPage.aspx. Why?

Master Page HTML

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        #div_Main
        {
            height: 825px;
            width: 1022px;
            top: 16px;
            left: 77px;
            position: absolute;
            margin-left: 14px;
        }
        #div_LeftPanel
        {
            width: 299px;
            top: 179px;
            left: 2px;
            position: absolute;
            height: 641px;
            background-color: #7E8387;
        }
        #div_Content
        {
            width: 716px;
            top: 180px;
            left: 303px;
            position: absolute;
            height: 638px;
        }
        #div_Header
        {
            top: 0px;
            left: 0px;
            position: absolute;
            height: 176px;
            width: 1022px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div_Main">
      <div id="div_Header">
          <img src="../Images/logo.jpg" />
      </div>
      <div id="div_Content">
        <asp:ContentPlaceHolder ID="cph_WorkingArea" runat="server">

        </asp:ContentPlaceHolder>
      </div>


      <div id="div_LeftPanel">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <br />
          <br />
          <br />
          <br />
          <br />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:LinkButton 
              ID="lnkbtn_JObAspirantsList" runat="server" 
              style="color: #CFCFF3; font-size: xx-large" 
              onclick="lnkbtn_JObAspirantsList_Click">Job Aspirants List</asp:LinkButton>
          <br />
          <br />
          <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <br />
          <br />
          <br />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <asp:LinkButton ID="lnkbtn_ERFList" runat="server" 
              style="color: #CFCFF3; font-size: xx-large" onclick="lnkbtn_ERFList_Click">ERF List</asp:LinkButton>
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <asp:LinkButton ID="lnkbtn_InterviewFeedbackList" runat="server" 
              style="color: #CFCFF3; font-size: xx-large" 
              onclick="lnkbtn_InterviewFeedbackList_Click">Interview FeedbackList</asp:LinkButton>
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:LinkButton ID="lnkbtn_NewEmployeeList" runat="server" 
              style="color: #CFCFF3; font-size: xx-large" 
              onclick="lnkbtn_NewEmployeeList_Click">New Employees List</asp:LinkButton>
            <br />
          <br />
          <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <asp:LinkButton ID="LinkButton1" runat="server" style="color: #CFCFF3; font-size: xx-large"  onclick="LinkButton1_Click">LogOut</asp:LinkButton>
          <br />
          <br />
&nbsp;&nbsp;
            </div>
     </div>
    </form>
</body>
</html>

Content Page HTML

<%@ Page Language="C#" MasterPageFile="~/MasterPages/HRMaster.Master" AutoEventWireup="true" CodeBehind="ERF.aspx.cs" Inherits="StarTechnologies.ERF" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cph_WorkingArea" runat="server">


    <p>
        <br />
&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:GridView ID="GridView1" runat="server" Height="212px" 
            onselectedindexchanged="GridView1_SelectedIndexChanged" Width="434px">
        </asp:GridView>
    </p>
    <br />


</asp:Content>
+2  A: 

Try not to use relative paths.

Use absolute:

<img src="~/Images/logo.jpg" />

That is assuming "Images" is a folder underneath the root of your web application.

The thing to remember about Master Pages is that they really are syntactic sugar in a way (similar to partial classes) That is, when you put an image inside a MasterPage, the .NET CLR will create the content page with the Master info - so the image reference will be unchanged.

It's not ../Images from the Master, its ../Images from the Content it's placed upon.

In other words, to the client, there is only ONE page (ASPX - content page), it's not like a magical parent page has been created which holds onto URL references.

HTH

RPM1984  2010-09-22 04:44:15
Yeah I tried this but when I use ~ the image is not displayed even on the master page.
Nadeem  2010-09-22 05:05:24
What do you mean "on the master page". Can you show your masterpage HTML and content page HTML where it's not workgin?
RPM1984  2010-09-22 05:12:33
The image lives in /Root/Images/logo.jpg? Just use an absolute path <img src="/Root/Images/logo.jpg"> - relative paths, master pages, and content pages in different directories just do not play nicely together.
Carson63000  2010-09-22 05:13:23
@Carson63000 - that's what i said in my answer (~ and / are the same AFAIK)
RPM1984  2010-09-22 05:22:10
@RPM1984: See the edited question.
Nadeem  2010-09-22 06:10:37
@RPM1984: When I say on the Master page I mean on the designer of Master page.
Nadeem  2010-09-22 06:11:51
@RPM1984 - don't forget that ~ only works on runat=server controls - if you serve up <img src="~/Images/logo.jpg" /> to the browser it won't work.
Carson63000  2010-09-23 00:40:27
@Carson63000 - youre right, i always forget the difference between ~ and /, thanks for reminding me
RPM1984  2010-09-23 00:53:33
+3  A: 

RPM1984 is almost right. You should use ~ to indicate a path relative to the root of your application. You should however translate that to a path the browser understands. If you are using ASP.NET controls like Image that is done automatically. If you're using HTML tags (without runat="server") you have to translate the path manually using Page.ResolveClientUrl().

For example:

<img src="<%= ResolveClientUrl( "~/Images/logo.jpg" ) %>"/>

In this case however, you're probably better off using the Image control:

<asp:Image runat="server" ImageUrl="~/Images/logo.jpg"/>
Marnix van Valen  2010-09-22 06:19:08
Youre right. +1
RPM1984  2010-09-22 06:22:03
Even this is not working for me. While I use this I cannot see the image even in the master page.
Nadeem  2010-09-22 06:26:38
Yeah this is working. But why?I mean what's wrong with <img src="<%= ResolveClientUrl( "~/Images/logo.jpg" ) %>"/>
Nadeem  2010-09-22 06:30:21
@Nadeem There's nothing wrong with it technically. Mixing server code with HTML is considered a 'bad thing' by many people because it makes your markup harder to read. If you anticipate someone else will someday need to maintain this site you should make it easy to read and understand the markup an code.
Marnix van Valen  2010-09-22 06:41:56
@Marnix van Valen: So this is about bad practice. That's Okay. But in my case <img src="<%= ResolveClientUrl( "~/Images/logo.jpg" ) %>"/> is not working at all. Not even on the master page. Forget about the content pages.
Nadeem  2010-09-22 06:54:23
@Nadeem Have you checked the HTML source in the browser? What path is generated for the image?
Marnix van Valen  2010-09-22 07:53:08
@Nadeem - try to stop thinking "it doesnt work, not even on the master page". There IS NO masterpage once it's rendered to the client - the end result is a page which is created by ASP.NET based on combining the masterpage/contentpage. Think of the masterpage as a "base class", not a seperate HTML page.
RPM1984  2010-09-23 00:55:03
Yeah that's right but I was talking about master page designer. I mean I could not see the image on master page designer.
Nadeem  2010-09-23 04:34:21
But I tried closing and reopening Visual Studio and this worked for me. And now ResolveClientUrl is also working fine.
Nadeem  2010-09-23 04:36:52
A: 

thank you very much, your answer solved my problem.

anil  2010-10-01 12:52:03

related questions

Displaying Flash content in a C# WinForms application
How to get the value of built, encoded ViewState?
Unhandled Exception Handler in .NET 1.1
How do I connect to a database and loop over a recordset in C#?
How do I most elegantly express left join with aggregate SQL as LINQ query
Get a new object instance from a Type in C#
.NET Testing Framework Advice
Automatically update version number
What is the difference between an int and an Integer in Java/C#?
How to write to Web.Config in Medium Trust ?
WinForms ComboBox data binding gotcha
How do you sort a C# dictionary by value?
Adding Scripting functionality to .NET applications
Floating Point Number parsing: Is there a Catch All algorithm?
How do I print an HTML document from a web service?
Decoding T-SQL CAST in C#/VB.net
Anatomy of a "Memory Leak"
How do I get a distinct, ordered list of names from a DataTable using Linq
Reliable Timer in a Console Application
How do I fill a DataSet or a DataTable from a LINQ query resultset ?
What's the difference between Math.Floor() and Math.Truncate() in .NET?
How do I calculate relative time?
How do I calculate someone's age in C#?
Are there any conversion tools for porting Visual J# code to C#?
When setting a form's opacity should I use a decimal or double?