Question

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

感谢您的帮助。

Answer 1

那是因为源图像使用的是相对URL。修复方法是包含图像原点的basehref，或将它们的相对路径转换为绝对路径。否则，图像已在服务器端受到保护。

当我将不同页面的内容加载到当前页面时，为什么没有出现图像？

1 个答案: