div之为什么你的图片不见了

最新推荐文章于 2021-04-10 11:43:49 发布

不一样的人

最新推荐文章于 2021-04-10 11:43:49 发布

阅读量845

点赞数

分类专栏： WEB开发文章标签： web前端

本文链接：https://blog.csdn.net/u013361010/article/details/40856695

版权

WEB开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在编写网页时，经常遇见这样的现象，明明插入了图片或者背景图片，而且图片路径没有问题，通过浏览器访问图片却没有显示出来。这种现象我遇见过几次，归纳分析，主要是以下几种情况。

情形一：代码如下所示

<body>
  <div style="background:url(../images/face/head.jpg)">
  </div>
</body>
</html>

图片路径没有问题，通过浏览器访问却出现了令人尴尬的叉叉。造成这种现象原因比较简单：因为你没有规定div的高度呀，因为背景图片是不占div的高度的。

情形二：

比如，你通过"http://localhost:8080/javaweb/treeNode.do" 访问一个Action，返回mapping.findForward("success"),在struts-config.xml中配置如下：

<action
      path="/treeNode"
      name="nodeForm"
      attribute="nodeForm"
      type="org.qkbase.paper.action.NodePreAction"
      scope="request"
      parameter="action"
    >
      <forward name="success" path="/paper/paper.jsp"/>
    </action>

paper.jsp在文件夹paper下面，其中一段代码为：

<body>
  <div style="background:url(../images/face/bluesky.jpg)"> <span style="font-family: Arial, Helvetica, sans-serif;">当久久的目不转睛的望着深邃的苍穹，不知何故心灵就感到孤独。天上的星星，几千年来注视着人间。无边无际的苍穹和烟云，淡漠的注视着人短促的生命。当你和它们相对而视，并努力去思索它们的意义时，在坟墓中等待我们每一个人的孤独之感就来到了心头。</span>

  </div>
</body>

背景图片的路径是相对于paper.jsp,如果你直接访问 http://localhost:8080/javaweb/paper/paper.jsp，没有问题，图片显示正常。但是http://localhost:8080/javaweb/treeNode.do，跳转到paper.jsp页面时，图片不翼而飞。

解释这种现象之前，我们再来看一个例子，修改struts-config.xml配置文件如下：

<action
      path="/treeNode"
      name="nodeForm"
      attribute="nodeForm"
      type="org.qkbase.paper.action.NodePreAction"
      scope="request"
      parameter="action"
    >
      <forward name="success" path="/paper/paper.jsp" redirect=“true“/>
    </action>

再访问：http://localhost:8080/javaweb/treeNode.do，背景图片正常显示，不要惊讶，看看地址栏，已经变成：http://localhost:8080/javaweb/paper/paper.jsp了。这是因为redirect=“true”的设置，使得访问Action和paper.jsp不在同一次请求中。

现在我可以说：所谓相对路径，不是页面所在物理位置的相对，而是访问地址的相对，或者说是请求的相对。就本例而言，浏览器是通过“http://localhost:8080/javaweb/treeNode.do”访问paper.jsp的，如何背景图片相对地址为：../images/face/bluesky.jpg，那就意味着文件的位置是在webapp下的images文件夹下face文件夹中。

作为一名初学者，我认为，我们应该尽可能的使用绝对路径。使用相对路径的唯一好处是便于代码不加修改的移植。然后，想在集群思想的普及，大的网站都采用的是分布式系统，有单独的文件服务器。文件不再是从本地读取。所以采用绝对路径，从文件服务器中读取文件，应该是明智的选择。