idea中javaweb的jsp頁(yè)面圖片加載不出來(lái)問(wèn)題及解決

更新時(shí)間：2023年07月17日 14:42:10 作者：Hello World 357

這篇文章主要介紹了idea中javaweb的jsp頁(yè)面圖片加載不出來(lái)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

idea中javaweb的jsp頁(yè)面圖片加載不出來(lái)

方式一

刪掉out輸出文件，重新生成（刪除out文件夾，然后運(yùn)行）

處理前：

在這里插入圖片描述

處理后：

在這里插入圖片描述

方式二

更改路徑（將路徑改為tomcat下的應(yīng)用程序上下文里的內(nèi)容+地址）

原路徑：

<img src="../image/logo.jpg" alt="Paris" width="120" height="120"></div>

修改后的路徑：

<img src="/Paris/image/logo.jpg" alt="Paris" width="120" height="120"></div>

idea部署javaweb項(xiàng)目jsp無(wú)法加載圖片（資源無(wú)法加載的問(wèn)題）

發(fā)現(xiàn)圖片加載不出來(lái)，按了f12，發(fā)現(xiàn)404nofound，于是乎花了一天時(shí)間看博客

可能的原因有幾個(gè)：

圖片文件夾的位置弄錯(cuò)了

不應(yīng)該把圖片等靜態(tài)資源放入WEB-INF里面，應(yīng)該放入和WEB-INF的同等級(jí)的目錄下

在這里插入圖片描述

借用一下百度百科的解釋

WEB-INF是Java的WEB應(yīng)用的安全目錄。所謂安全就是客戶端無(wú)法訪問(wèn)，只有服務(wù)端可以訪問(wèn)的目錄。

如果想在頁(yè)面中直接訪問(wèn)其中的文件，必須通過(guò)web.xml文件對(duì)要訪問(wèn)的文件進(jìn)行相應(yīng)映射才能訪問(wèn)。

WEB-INF文件夾下除了web.xml外，還存一個(gè)classes文件夾，用以放置 *.class文件，這些 *.class文件是網(wǎng)站設(shè)計(jì)人員編寫(xiě)的類庫(kù)，實(shí)現(xiàn)了jsp頁(yè)面前臺(tái)美工與后臺(tái)服務(wù)的分離，使得網(wǎng)站的維護(hù)非常方便。web.xml文件為網(wǎng)站部署描述XML文件，對(duì)網(wǎng)站的部署非常重要。

在jsp中訪問(wèn)靜態(tài)資源的方法

<body style="background-image:url(img/bgc.jpg);background-repeat: no-repeat;background-size: cover;">
<img src="img/icon_賬號(hào).png" style="width:1.5rem;height:1.5rem;vertical-align: middle;">

由于我放在web目錄下，所以直接用相對(duì)路徑訪問(wèn)，img/bgc.jpg就可以訪問(wèn)到了。通常不建議使用絕對(duì)路徑，因?yàn)榇罱ㄍ戤吅?，路徑是?huì)有改變的。

訪問(wèn)的路徑不對(duì)

在我這個(gè)項(xiàng)目里面，假如使用絕對(duì)路徑的話

那么應(yīng)該是這個(gè)格式

<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
協(xié)議://server名字+:端口號(hào)（Tomcat默認(rèn)8080）+(web目錄下的路徑)+"/"
%>

這個(gè)是我的：http://localhost:8080/servletdemo_war_exploded/img/bgc.jpg

使用相對(duì)路徑的話那么應(yīng)該是img/xxx.jpg

可能是攔截器的問(wèn)題

把WEB-INF下的web.xml文件添加上下面的代碼

 <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.gif</url-pattern>
    </servlet-mapping>
    <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>

四.可能是tomcat配置，以及項(xiàng)目out沒(méi)更新的問(wèn)題

在這里插入圖片描述