Idea 2020插入图片资源的坑（自定义404，500页面）

最新推荐文章于 2024-08-09 11:51:43 发布

放浪曲蘖

最新推荐文章于 2024-08-09 11:51:43 发布

阅读量2.4k

点赞数 5

分类专栏： Java web

本文链接：https://blog.csdn.net/qq_44627732/article/details/108997978

版权

Java web 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

项目的结构如下：

首先运行tomcat，打开699.jsp，但是图片资源无法显示：

查看控制台：

发现图片资源返回的请求是404，就是没有找到这个图片资源，但是查看下面的图片所在目录是正确的，我明明已经把图片资源放到images目录里面了，不可能找不到啊。

这就是idea的坑爹之处了。

对于新加进去的资源文件，maven并不能及时加载，这就导致了部署到tomcat后出现404错误。解决方法其实非常简单：

手动更新一下就可以了。有时候点一下可能还不行，得多点几下。

然后重启tomcat，打开600.jsp，图片就可以正常显示了：

网上有些解决方案说，在web.xml文件中添加默认servlet取消对图片资源的拦截：

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.png</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.jpg</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.jpeg</url-pattern>
  </servlet-mapping>

但是这种解决的是SpringMVC框架对图片资源的拦截，对我这个问题的解决是没有任何帮助的。因为我只是在jsp文件中添加一个图片资源，并没有使用任何的框架。

坑虽然不大，但是也耗费了整整五六个小时的时间才解决，原因就是图片路径和服务器缓存的问题，其实图片路径是个非常简单的问题，只要在填写路径的时候，idea能够弹出来提示：

像这样就说明路径是对的，但是碰上该死的图片缓存加上maven的更新不及时，就可能导致一系列的问题，让人分不清什呢才是真正的问题。

这样就导致用同样的方法这一个jsp文件中图片会正常显示，但是另一个jsp文件中的图片却不能显示，这是因为可能某次阴差阳错的使得图片正常显示了一次，但是这时候图片的路径其实是错误的，这样在访问jsp文件的时候，虽然图片路径不对，但是图片依然能够正常显示，这就是因为服务器是直接从缓存中获得的图片资源，而不是按照路径找的。

自定义404，500页面：

在web.xml文件中添加以下代码：

<error-page>
    <error-code>404</error-code>
    <location>/error/404.jsp</location>
  </error-page>
  <error-page>
    <error-code>500</error-code>
    <location>/error/500.jsp</location>
  </error-page>

然后启动tomcat，随便输入一个不存在的文件：

并没有打开我想要的页面，但是直接打开404.jsp，图片是可以正常显示的：

F12：

可以看出，页面是已经跳到404.jsp了，但是图片资源没有正常显示，可以看到图片的路径是错误的。之所以会出现这个错误，是因为在404.jsp文件中图片资源的路径使用的是相对路径：

<img src="../images/404.png" alt="404.png Not Found"/>

结合项目的目录：

我目前访问的是：

这个12是和images目录同一级的，而../是返回上一级目录，即和项目目录同一级的目录，所以服务器找到http://localhost:8080/images/404.png ，当然这个目录是不存在的，所以会找不到图片资源。

可以在images同级目录中找一个不存在的文件：

这样是可以正确显示404页面的，从这里可以看出，

<img src="../images/404.png" alt="404.png Not Found"/>并不是从jsp文件的上一级开始寻找图片资源，而是从要访问的文件的上一级目录开始寻找图片资源文件！！！

要解决这个方法，可以直接把图片的路径写死：

<img src="/ImageTest_war/images/404.png" alt="404.png Not Found"/>

这样不管访问的文件在哪一级目录下，都能正确找到图片资源：

更好的方式是用EL表达式获取部署项目的路径,即web应用的名称：

<img src="${pageContext.request.contextPath}/images/500.png" alt="Not Found"/>

在用这个之前，一定要保证自己的webapp版本高于2.4！！

idea另一个坑：用maven构建的项目webapp版本默认是2.3，是识别不了EL表达式的！！！

采用高版本：

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         id="WebApp_ID" version="3.0">
</web-app>