1.問(wèn)題描述：

大家在開(kāi)發(fā)web項(xiàng)目中可能會(huì)遇到這樣的問(wèn)題：運(yùn)行web項(xiàng)目，打開(kāi)瀏覽器但本機(jī)的圖片顯示不出來(lái)，f12查看是瀏覽器拒絕訪問(wèn)本機(jī)路徑。

2.原因分析：

瀏覽器出于安全考慮是不允許html訪問(wèn)本地文件。不會(huì)允許瀏覽器打開(kāi)file://開(kāi)頭的本地圖片。
我們寫一個(gè)簡(jiǎn)單的html，在img的src直接給本機(jī)圖片絕對(duì)路徑，然后直接瀏覽器跑，可以看到圖片顯示。這說(shuō)明瀏覽器拒絕訪問(wèn)本機(jī)資源是在通過(guò)tomcat服務(wù)器的前提下的，我們寫html文件直接瀏覽器運(yùn)行不受影響。

3.解決思路：

通過(guò)原因分析，我們應(yīng)該把眼光放在tomcat服務(wù)器上，設(shè)置tomcat中默認(rèn)訪問(wèn)本機(jī)資源的絕對(duì)路徑，然后給一個(gè)對(duì)應(yīng)的相對(duì)路徑，瀏覽器是不會(huì)拒絕訪問(wèn)相對(duì)路徑的，因?yàn)檫@個(gè)比訪問(wèn)絕對(duì)路徑安全多了。

舉例：
我電腦圖片絕對(duì)路徑：D:\technolog\img
我想要的圖片位置 D:\technologyprograme\img\1.jpg
設(shè)置的相對(duì)路徑： /img

具體的方案如下：
先找到安裝的tomcat目錄中的config中的server.xml文件；
然后打開(kāi)server.xml，找到Host標(biāo)簽，然后在Host標(biāo)簽中添加這個(gè)一段：

<Host><Context docBase="D:\technologyprograme\img" path="/img" reloadable="true"/></Host>

你如果用的idea玩的web項(xiàng)目，注意還需要在Tomcat配置中勾選“Deploy application configured in Tomcat instance”才能夠加載以上配置信息。
如下圖：

重新啟動(dòng)tomcat運(yùn)行web項(xiàng)目即可訪問(wèn)了

前端img的src內(nèi)容，以我這邊的為例如下：

<img id="pp" src="/img/1.jpg"/>

這里我給點(diǎn)建議，在設(shè)計(jì)數(shù)據(jù)庫(kù)對(duì)圖片的存儲(chǔ)，把這個(gè)相對(duì)路徑存放即可，比如我這的就存：

/img/1.jpg

4.拓展

我們?cè)龠M(jìn)一步思考，如果不用上述方法，我們存放資源還有什么思路？
我這里簡(jiǎn)單的分享哈我自己的想法：
可以直接把圖片資源弄到項(xiàng)目文件夾中，訪問(wèn)給項(xiàng)目圖片的相對(duì)路徑也可以實(shí)現(xiàn)，但有一個(gè)弊端，每次重啟web項(xiàng)目，圖片資源丟失。
可以借助第三方存儲(chǔ)，云數(shù)據(jù)庫(kù)，對(duì)象存儲(chǔ)數(shù)據(jù)庫(kù)，直接把圖片存上面，訪問(wèn)就給圖片url，這個(gè)就避開(kāi)本機(jī)存儲(chǔ)，在公司也常用類似方案，數(shù)據(jù)安全及維護(hù)更好。

總結(jié)

以上是生活随笔為你收集整理的web工程无法访问本地图片解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。