为什么当我将不同页面的内容加载到当前页面时不显示图像？

我有一个容器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

为什么当我将不同页面的内容加载到当前页面时不显示图像？

回答

相关问题