主版頁面中引用圖片，外部js、css檔案的路徑問題

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

    當嵌套主版頁面的子頁面與主版頁面不在同一級目錄時，往往會牽涉到 外部圖片、js、css檔案引用的路徑問題。（以下是引用別人加自己整理）  
    1. 圖片、<a>標籤    
    非常好解決     
<img runat="server"  src="~/images/log.gif" mce_src="~/images/log.gif"></script>   
<a  href="~/book/buy.aspx" mce_href="~/book/buy.aspx" runat="server"></a>      
    加上runat="server" ，路徑使用絕對路徑~/基本上就OK了。   

    2. CSS檔案引用     
<link rel="stylesheet"  type="text/css"  href="style.css" mce_href="style.css"></script>      
     這裡神奇的就是link的檔案的href是隨著被訪問檔案的目錄結構自動調整，說白了就考慮主版頁面引用的路徑就 可以了，其他不用費心。   
    比如在主版頁面同目錄下的一個檔案夾內的一個xxx.aspx引 用的主版頁面，那麼上面的語句在用戶端就自動變為     
<link rel="stylesheet"  type="text/css"  href="../style.css" mce_href="style.css"></script>   
    前提就是<head runat="server"></head>必須有runat="server"     

     3.  JS檔案的引用    
<mce:script type="text/javascript" src="menu/jquery.min.js" mce_src="menu/jquery.min.js"></mce:script>        
    這樣的話在其他目錄下的分頁檔，用戶端肯定就引用不到了      
    那麼你需要這樣處理       
<mce:script type="text/javascript" src='<%=ResolveUrl(“menu/jquery.min.js”) %><!--  
    '>  
    // --></mce:script>      
<mce:script type="text/javascript" src="<%=ResolveClientUrl(“" mce_src="&lt;%=ResolveClientUrl(“"menu/jquery.min.js”) %><!--  
    '>  
    // --></mce:script>    

    這是2種方式，在用戶端的路徑當然也會不一樣，分別是：      
<mce:script type="text/javascript" src="/Example/menu/jquery.min.js" mce_src="Example/menu/jquery.min.js"></mce:script>    
<mce:script type="text/javascript" src="menu/jquery.min.js" mce_src="menu/jquery.min.js"></mce:script>      
    那麼很明顯ResolveClientUrl是相對路徑，是比 較好用的，當然ResolveUrl也有很多地方需要這樣的絕對路徑，其中Example是web應用的名字。   
    另外，如果不可用請在<head>標記中添加：runat="server"    
     當子頁面需要引用自己的css、js外部檔案時，可以在主版頁面 的<head runat="server" ></head>標記中加添加一個標籤   
<asp:contentplaceholder runat="server" id="HeadContent"  >    
</asp:contentplaceholder>    
    子頁面可在此標記中加入自己需要引用的檔案  
</asp:Content  
    <asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" Runat="Server">  
<link rel="stylesheet" href="css/thickbox.css" mce_href="css/thickbox.css" type="text/css" />  
<link rel="stylesheet" href="http://www.cnblogs.com/css/common.css" mce_href="http://www.cnblogs.com/css/common.css" type="text/css" />  
<mce:script type="text/javascript" src="js/jquery-1.4.1.min.js" mce_src="js/jquery-1.4.1.min.js"></mce:script> 
本文轉自：http://blog.csdn.net/liujun198773/archive/2010/09/29/5913882.aspx

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More