When I click 'Share', then it opens facebook share page in a new tab. I want to show temp.jpg in left bar in this page. How to do this?
test.aspx
<div id="page-wrap">
<!-- AnythingSlider #1 -->
<ul id="slider1" style="width: 778px; height: 452px; background:#fff;">
<li>
<div style="float: left; padding-right: 35px; padding-left:50px;">
<img src="../../img/temp.jpg" style="width: 264px;
height: 377px; border: none;" />
<uc:DownloadControl ID="DownloadControl1" runat="server" PageParameters="1" />
</div>
</li>
<li>
<uc:DownloadControl ID="DownloadControl2" runat="server" PageParameters="2" />
...
DownloadControl.ascx
<div style="float: left">
<a class="icerik" id="facebookShare" runat="server" target="_blank">
<img border="0" src="images/facebook.jpg" alt="Resorts"
title="Hotels & Resortss" /> Share </a>
DownloadControl.ascx.cs
protected void Page_Load(object sender, EventArgs e)
{
facebookShare.HRef = "http://www.facebook.com/sharer.php?u=http://www.test.com/test.aspx";
}
If you want to add custom information about your page while sharing with sharer.php, you must place additional open graph meta tags in the head of your page. For this example, test.com/test.aspx contains these tags:
<head>
<meta property="og:title" content="Test" />
<meta property="og:url" content="http://www.test.com/test.aspx" />
<meta property="og:image" content="http://www.test.com/img/temp.jpg" />
// other meta tags
</head>
More information about Open Graph protocol is here
Related
My application was working before converting it to an asp.net Master/Content page architecture. There is a custom control that has 3 buttons in one DIV and a chart in another DIV. The custom control is added to the content page many times with a different chart in each. The same event handler services a button, regardless of how many times it appears on the screen.
After converting to a Master/Content page architecture, the event handler no longer receives the onClick event.
The Content Page looks like this...
<%# Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm7.aspx.cs" Inherits="OperationalStats.Forms.WebForm7" %>
<%# Register src="../Classes/UserControls/ChartWidget.ascx" tagname="ChartWidget" tagprefix="uc1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>
And the user control page looks like this
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ChartWidget.ascx.cs" Inherits="OperationalStats.Classes.UserControls.ChartWidget" %>
<div id="TestDiv" class="floating-box" runat="server" style="border: medium solid #00FF00; height: 270px; width: 250px">
<div id="MenuDiv" runat="server">
<asp:Button ID="FilterButton" runat="server" Text="Filter" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" OnClick="FilterButton_Click" CommandName="Tests Delivered By Test Center" />
<asp:Button ID="ZoomButton" runat="server" class="btn btn-info btn-sm" Text="Zoom" data-toggle="modal" data-target="#myModal" Width="50px" OnClick="ZoomButton_Click" />
<asp:Button ID="ShowTableButton" runat="server" class="btn btn-info btn-sm" Text="Table" data-toggle="modal" data-target="#myModal" Width="50px" OnClick="TableButton_Click" />
</div>
<div id="ChartDiv" runat="server" style="position: relative; top: 6px; left: 2px; ">
</div>
</div>
The content declaration in the Master page looks like this
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
</div>
The following is an example of a button's event handler
namespace MyApp.Classes.UserControls
{
public partial class ChartWidget : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void FilterButton_Click(object sender, EventArgs e)
{
...
}
As I say, the event handler never receives the click event after converting to a Master/Content page architecture.
Thoughts?
I have a PDFTron Web Viewer control on my ASP.NET page where I can successfully view a static file 'GettingStarted.xod' already provided by PDFTron in the WebViewer folder. The file is returned by a ASP.NET web api REST service. The file displays successfully while running the solution locally. On hosting in Azure, I get the document from the web api successfully but the web page hosting the web viewer doesn't show the file, instead an empty web viewer control is only displayed. Please suggest how can I get the XOD to be displayed in the ASP.NET page hosting the web viewer control. The code for fetching the XOD file in settings.js file on WebViewer directory is as follows:-
window.WebViewerUniversalInstance.model.set(
{
documentUrl: "/api/Document/GetXODDocument",
//serverUrl: "../html5/annotationHandler.php", //server script for handling annotations
annotationUser: new PDFTron.WebViewer.User("Guest", false),
currentPageNumber: 0,
pageCount: 0,
zoomLevel: 0,
fitMode: PDFTron.WebViewer.FitMode.Zoom,
layoutMode: PDFTron.WebViewer.LayoutMode.SinglePage,
toolMode: '',
rotation: 0,
webViewerLibPath: 'lib/', //URL path to the WebViewer lib folder
webViewerOptions: { //extra WebViewer options
silverlightOptions: {
enableAnnotations: false //disable annotations if silverlight is loaded.
}
}
});
Adding the .aspx page markup and errors received in console tab of browser
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="DocViewer.aspx.cs" Inherits="PDFTronWebViewerWebApi.Content.WebViewer.View" %>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6 lt-ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 lt-ie9"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <!--<![endif]-->
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- use latest browser mode for IE -->
<title>WebViewer Universal</title>
<!-- WebViewer.js Dependencies -->
<script type="text/javascript" src="lib/resources/jquery-1.10.2.min.js"></script>
<!-- WebViewer.js IF DEBUG -->
<!--<script src="../silverlight/Silverlight.js" type="text/javascript"></script>
<script src="../flash/FlashUtils.js"></script>
<script src="../flash/swfobject.js"></script>
<script src="../flash/FABridge.js"></script>
<script src="../flash/HttpAjaxPartRetriever.js"></script>
<script src="../WebViewer.js" type="text/javascript"></script>-->
<!-- WebViewer.js ELSE IF PRODUCTION -->
<script src="lib/WebViewer.min.js" type="text/javascript"></script>
<!-- WebViewer.js END -->
<!-- WebViewer Universal Dependencies -->
<script type="text/javascript" src="lib/resources/jquery-ui-1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/resources/modernizr.custom.js"></script>
<script type="text/javascript" src="lib/resources/i18next-1.7.1/i18next-1.7.1.min.js"></script>
<script type="text/javascript" src="lib/resources/backbone/underscore-min.js"></script>
<script type="text/javascript" src="lib/resources/backbone/backbone-min.js"></script>
<!-- WebViewer Universal Specific -->
<link type="text/css" rel="stylesheet" href="lib/universal/universal.css" />
<script src="lib/universal/universal.js"></script>
<!-- WebViewer Universal Settings (Modify this to your own server setup) -->
<script src="settings.js"></script>
<!-- WebViewer Universal Theming -->
<link type="text/css" rel="stylesheet" href="lib/resources/themes/cloud/jquery-ui-1.10.0.custom.min.css" />
<link type="text/css" rel="stylesheet" href="lib/resources/themes/classic/icons.css" /> <!-- use the extra icon set for the classic theme -->
<link type="text/css" rel="stylesheet" href="lib/resources/themes/classic/icons.css" media="screen" /> <!-- use the extra icon set for the classic theme -->
</head>
<body>
<form id="form1" runat="server">
<div id="headerContainer">
<!-- Optional: add custom header content here.
Example usage: Application logo/branding, links to other pages in your app (My Account, Login, Sign up), etc.
-->
<div>
<span>
<br />
<span style = "font-weight:bold; font-size: 22px;" > Doc View Page </span> <br /><br />
<span>Doc Number : <asp:Label ID="lblDocNo" runat="server" /> ; File Type : XOD</span><br />
<span>File : <asp:Label ID="lblDocName" runat="server" /></span>
</span>
</div>
<div style = "clear:both" ></div>
</div>
<div id="contentContainer">
<div id="leftPanelContainer" style="float:left;">
</div>
<div id="viewerContainer" style="float:left;width:100%">
<div id="control" class="toolbar ui-widget-header" style="overflow:hidden;white-space:nowrap">
<span class="left-aligned">
<button id="sidePanelToggle" type="button" data-i18n="[title]controlbar.toggleSidePanel;controlbar.toggleSidePanel"></button>
</span>
<div class="right-aligned">
<div class="group">
<button id="layoutModeMenuButton" type="button" data-i18n="[title]controlbar.pageLayoutModes;controlbar.pageLayoutModes"></button>
<button id="rotateButton" type="button" data-i18n="[title]controlbar.rotate;controlbar.rotate"></button>
</div>
<div class="group">
<button type="button" id="prevPage" data-i18n="[title]controlbar.previousPage;controlbar.previousPage"></button>
<input type="text" pattern="[0-9]*" name="pageNumberBox" id="pageNumberBox"/>
<div class="ui-label" id="totalPages">/0</div>
<button type="button" id="nextPage" class="" data-i18n="[title]controlbar.nextPage;controlbar.nextPage"></button>
</div>
<div class="group">
<button type="button" id="zoomOut" data-i18n="[title]controlbar.zoomOut;controlbar.zoomOut">Zoom Out</button>
<div class="hidden-xs hidden-sm hidden-md" id="slider" data-i18n="[title]controlbar.zoom"></div>
<input type="text" name="zoomBox" id="zoomBox" data-i18n="[title]controlbar.zoom"/>
<button type="button" id="zoomIn" data-i18n="[title]controlbar.zoomIn;controlbar.zoomIn"></button>
</div>
<div class="group">
<div id="fitModes" class="hidden-xs" title="Page layout">
<input type="radio" id="fitWidth" name="radioFirst"/>
<label for="fitWidth" data-i18n="[title]controlbar.fitWidth;controlbar.fitWidth"></label>
<input type="radio" id="fitPage" name="radioFirst"/>
<label for="fitPage" data-i18n="[title]controlbar.fitPage;controlbar.fitPage"></label>
</div>
</div>
<div class="group">
<span id="tools">
<input type="radio" id="pan" data-tool-mode="Pan" name="radioSecond" />
<label for="pan" data-i18n="[title]controlbar.pan;controlbar.pan"></label>
<input type="radio" id="textSelect" data-tool-mode="TextSelect" name="radioSecond"/>
<label for="textSelect" data-i18n="[title]controlbar.textSelect;controlbar.textSelect"></label>
</span>
</div>
<div class="group">
<span id="searchControl" class="search-component hidden-xs hidden-sm">
<input id="searchBox" type="text" class="toolbar-input-text search-component" name="search" data-i18n="[title]controlbar.search"/>
<button id="searchButton" class="search-component" type="button" data-i18n="[title]controlbar.search;controlbar.search"></button>
</span>
</div>
<div class="group">
<button id="downloadButton" type="button" data-i18n="[title]controlbar.download;controlbar.download"></button>
<button id="printButton" type="button" data-i18n="[title]controlbar.print;controlbar.print" style="display: none;"></button>
<button id="fullScreenButton" type="button" data-i18n="[title]controlbar.fullScreen;controlbar.fullScreen"></button>
<button id="aboutButton" type='button'>About</button>
</div>
</div>
</div>
<ul id="layoutModeMenuList" class="ui-widget ui-menu-dropdown" style="display:none">
<li data-layout-mode="SinglePage"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-single"></span>
<div data-i18n="controlbar.layoutMode.single"></div></a></li>
<li data-layout-mode="Continuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-single-cont"></span>
<div data-i18n="controlbar.layoutMode.continuous"></div></a></li>
<li data-layout-mode="Facing"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-facing"></span>
<div data-i18n="controlbar.layoutMode.facing"></div></a></li>
<li data-layout-mode="FacingContinuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-facing-cont"></span>
<div data-i18n="controlbar.layoutMode.facingContinuous"></div></a></li>
<li data-layout-mode="FacingCover"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-cover"></span>
<div data-i18n="controlbar.layoutMode.cover"></div></a></li>
<li data-layout-mode="CoverContinuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-cover-cont"></span>
<div data-i18n="controlbar.layoutMode.coverContinuous"></div></a></li>
</ul>
<div id="overlayMessage" class="overlayMessage" style="display:none"></div>
<div id="printDialog" style="display:none">
<div>
<span data-i18n="print.pagesToPrint"></span>
<input type="text" id="printPageNumbers" title="Enter a single page number or a single page range. e.g. 3, 4-10." placeholder="e.g. 3, 4-10" style="width:100px" />
</div>
<br/>
<div id="printProgress"><div class="progressLabel"></div></div>
</div>
<div id="documentContainer" style="overflow: auto;width:100%;">
</div>
</div>
<div id="rightPanelContainer" style="float:right;">
</div>
<div style="clear:both"/>
</div>
<div id="footerContainer">
<!-- Optional: add footer content here
Example usage: Application logo/branding, a secondary control toolbar (e.g. page navigation), status bar
-->
</div>
</form>
</body>
</html>
Console Errors in browser:
HTML1300: Navigation occurred.
DocViewer.aspx
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
DocViewer.aspx
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/jquery-1.10.2.min.map
HTML1500: Tag cannot be self-closing. Use an explicit closing tag.
DocViewer.aspx (166,13)
HTML1508: Unmatched end tag.
DocViewer.aspx (173,5)
HTML1521: Unexpected "</body>" or end of file. All open elements should be closed before the end of the document.
DocViewer.aspx (174,1)
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/i18next-1.7.1/translation-en.json
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/backbone/underscore.js
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/backbone/backbone.js
SCRIPT7016: Use of XMLHttpRequest with the synchronous flag set to true is deprecated due to its impact on user-perceived site performance.
jquery-1.8.2.min.js (2,85652)
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/html5/Resources/i18n/translation-en.json
SCRIPT5022: Error loading document: Invalid XOD file: Zip end header data is wrong size!
CoreControls.js (727,381)
As suggested by Ryan, I upgraded to latest version 2.2.2. I left the WebApi approach and using PDF Tron Web Viewer as used MVC controller to download the file first on hosted folder in Azure and then displayed the file on MVC Razor View.
It looks like you are running an older version of WebViewer that does not have the azure specific fixes.
You need to switch to the latest version.
https://www.pdftron.com/webviewer/download.html
You can check your version by bringing up a developer console in Chrome, in the top left there is a dropdown that should say "", change this to ReaderControl.html, then run readerControl.docViewer.version in the console.
Hi guys so i have a div slider element im trying to put in, but however i cannot seem to offset it at all my code is this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
</asp:ContentPlaceHolder>
<style type="text/css">
.auto-style2 {
width: 277px;
height: 150px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="Navbar">
<div class="Log">
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
<div class="Header">
<%-- <div id="boxtest">
<input id="Textbox" type="text" name="test"/>
</div> --%><img alt="gmaa" class="auto-style2" src="GMAA%20Logo%20Large%20Resized.png" />
<div class="nav">
<ul>
<li>Parents
</li>
<li>Providers
</li>
<li>About Us
</li>
<li>Faqs
</li>
<li>Applicants
</li>
</ul>
</div>
</div>
<div class="slider">
<img src="GMG%20Logo%20Large%20slider.jpg" border="0" alt="GMG"/>
<img src="GMAA%20Logo%20Large%20slider.png" border="0" alt="GMAA" />
<img src="GMRC%20Logo%20Large%20Slider.png" border="0" alt="GMRC"/>
</div>
</form>
</div>
</body>
</html>
now from my css it seems that everything should work as i moved an element that was inside of a div earlier but now its just not working at all?, does anyone have any tips, also here is the css for the slider element:
div.slider {
width:1000px;
height:541px;
overflow:hidden;
margin:auto;
left:-50px;
}
Simply put,... in order to position a div within its parent, make the parent element position:relative;
<div style="position:relative; height:500px; width:100%;">
<div style="position:absolute; left: 60px; top:60px; width:10px; height:10px;">
absolute
</div>
</div>
Next... why not look into JS library which supports this out of the box.?
I have create a website with masterpage. Apart from this, I also create a child page called - Home.aspx, which inside this home.aspx file, I have use a Jquery slider to display slide show of images.
The images had appeared successfully at first(no errors). However, upon adding more child pages and adding an Login control to the masterpage, the images are not appearing anymore. In addition, the file path of the images had appeared errors - "Warning File 'Images/h1.jpg' was not found."
I had tried to comment up the Login control inside the masterpage to check whether does it affect the jquery and eventually it did not.
Here is my code of the master page head section whereby I add in the jquery:
<head runat="server">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>BedOfRoses</title>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.slidertron-1.0.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Following is the Home.aspx file code:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="banner">
<div id="slider">
<div class="viewer">
<div class="reel">
<div class="slide"> <img src="Images/H1.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H2.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H3.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H4.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H4.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H6.jpg" alt="" /> </div>
</div>
</div>
</div>
<script type="text/javascript">
$('#slider').slidertron({
viewerSelector: '.viewer',
reelSelector: '.viewer .reel',
slidesSelector: '.viewer .reel .slide',
advanceDelay: 3000,
speed: 'slow'
});
</script>
</div>
Are these pages placed in a separate folder than the root one? Use the root selector instead of the current dir selector?
This
<div class="slide"> <img src="/Images/H1.jpg" alt="" /> </div>
instead of this
<div class="slide"> <img src="Images/H1.jpg" alt="" /> </div>
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">
<br />
<br />
<br />
<br />
<br />
<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 />
<br />
<br />
<br />
<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 />
<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 />
<asp:LinkButton ID="LinkButton1" runat="server" style="color: #CFCFF3; font-size: xx-large" onclick="LinkButton1_Click">LogOut</asp:LinkButton>
<br />
<br />
</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 />
<asp:GridView ID="GridView1" runat="server" Height="212px"
onselectedindexchanged="GridView1_SelectedIndexChanged" Width="434px">
</asp:GridView>
</p>
<br />
</asp:Content>
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"/>
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
I had the same problem.
My master page's content didn't display but the Web Form content did.
What happens is that the content page is overwritting the master page's content.
I solved it creating a new ContentPlaceHolder in the MasterPage with ID="Example".
Then in the Web Form, I changed ContentPlaceholderID="OlderID" to ContentPlacerHolderID="Example".