爲什麼當我將不同頁面的內容加載到當前頁面時不顯示圖像？

我有一個容器div的index.html頁面。當我將load()外部頁面放入容器div中時，它的工作原理與文本相同，但圖像不見了。有沒有辦法解決這個問題？我排除了交叉來源問題;這兩個頁面都在同一個域中。爲什麼當我將不同頁面的內容加載到當前頁面時不顯示圖像？

這是我的index.html頁面。

<!doctype html> 
<html> 
    <head> 
    <title>Lakes</title> 
    </head> 
    <body> 
    <div id='div1_top'> 
     <h1>Lakes by state</h1> 
     <p>This is some text.</p> 
    </div> 
    <div id="nav"> 
     <li><a href="states/illinois.html">Illinois Lakes</a</li> 
     <li><a href="#" id="indiana">Indiana Lakes</a></li> 
     <li><a href="#" id="iowa">Iowa Lakes</a></li> 
    </div> 
    <div id="content">This is where content goes</div> 
    <script src="js/jquery-2.1.4.js"></script> 
    <script type="text/javascript"> 

    $(function() { 
     $('#nav a').click(function(e) { 
     $('#content').hide().load($(this).attr('href'), function() { 
      $('#content').show(); 
     }); 
     return false; 
     }); 
    }); 

    </script> 
    </body>  
</html>

下面是一個外部頁面被加載到index.html頁面上的div。

<DOCTYPE = html> 
<html> 
    <body> 
    <div id="image_lake"> 
     <img src="../img/lake-michigan.jpg" alt="lake Michigan" height="100" width="300"> 
    </div> 
    <div> 
     <h1>illinois</h1> 
    </div> 
    <div> 
     <h3>This is just some random placeholder text.</h3> 
    </div> 
    </body> 
</html>

感謝您的任何幫助。

來源

2017-02-25 johncrab

您應該提供一些示例或深入解釋您想要實現的目標。我認爲你需要的是[iframe]（https://www.w3schools.com/TAGs/tag_iframe.asp），如果我正確解密了你的問題。 –

你可以檢查網絡檢查員哪些錯誤代碼正在查詢圖像？如果他們是404，我認爲這可能是因爲圖像路徑。您應該使用絕對URL地址在圖像上定義src。 –

歡迎來到堆棧溢出！我編輯了你的問題的標題來陳述和總結問題形式的問題。我還減少了冗長和更明確的內容，並對代碼進行了格式化以實現最大程度的可讀性。 – greim

這是因爲源圖像正在使用相對URL。解決方法是包含圖像原點的basehref，或將其相對路徑轉換爲絕對路徑。否則，圖像已在服務器端受到保護。

來源

2017-02-28 07:26:29

爲什麼當我將不同頁面的內容加載到當前頁面時不顯示圖像？

回答

相關問題