vue報(bào)錯(cuò)Not?allowed?to?load?local?resource的解決辦法
問(wèn)題描述
我在前后端分離項(xiàng)目中，在前端vue里面<img>標(biāo)簽中通過(guò)絕對(duì)路徑訪問(wèn)本地圖片，在加載圖片的時(shí)候會(huì)報(bào)出Not allowed to load local resource: ，這個(gè)問(wèn)題我也進(jìn)行了相關(guān)的搜索，出現(xiàn)這個(gè)問(wèn)題的原因是因?yàn)闉g覽器出于安全因素，禁止通過(guò)絕對(duì)路徑訪問(wèn)圖片，需要通過(guò)虛擬路徑進(jìn)行訪問(wèn)，下面我會(huì)簡(jiǎn)單清楚的說(shuō)明解決的方法。
解決方法
通過(guò)創(chuàng)建一個(gè)配置類，配置類去實(shí)現(xiàn) WebMvcConfigurer 接口，重寫里面的
addResourceHandlers 方法。
@Configuration
public class PictureConversionConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
/**
* 資源映射路徑
* addResourceHandler：訪問(wèn)映射路徑
* addResourceLocations：資源絕對(duì)路徑
*/
registry.addResourceHandler("/doctor/**")
.addResourceLocations("file:///E:/GraduationDesign/manage/hospital/src/assets/picture/");
}
}第一個(gè) addResourceHandler 方法里面填寫你想要設(shè)置的虛擬路徑，下面addResourceLocations 方法填寫資源的絕對(duì)路徑。配置完成后，虛擬路徑為http://localhost:配置類端口號(hào)/doctor/圖片名稱。
比如上面絕對(duì)路徑為E:/GraduationDesign/manage/hospital/src/assets/picture/，而圖片整體路徑為E:/GraduationDesign/manage/hospital/src/assets/picture/qq.jpg，則這里的虛擬路徑為http://localhost:8201/doctor/qq.jpg
總結(jié)
以上就是vue報(bào)錯(cuò)Not allowed to load local resource的解決辦法的詳細(xì)內(nèi)容，更多關(guān)于vue報(bào)錯(cuò)Not allowed to load local resource的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了VUE中的打包刪除文件、圖片的HASH碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作
這篇文章主要介紹了vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法
這篇文章主要為大家詳細(xì)介紹了vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
vue.js調(diào)用python腳本并給腳本傳數(shù)據(jù)
在有些情況下需要使用不同的語(yǔ)言來(lái)完成一個(gè)項(xiàng)目,因此就有可能出現(xiàn)不同語(yǔ)言的程序之間的相互調(diào)用,下面這篇文章主要給大家介紹了關(guān)于vue.js調(diào)用python腳本并給腳本傳數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2024-03-03
Vue實(shí)現(xiàn)導(dǎo)航吸頂效果的教程詳解
在瀏覽器上下滾動(dòng)的時(shí)候,如何距離頂部的距離大于78px,吸頂顯示,小于78px則隱藏,所以本文小編給大家介紹了Vue設(shè)置導(dǎo)航吸頂?shù)脑敿?xì)教程,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01
前端設(shè)置cookie之vue-cookies使用及說(shuō)明
這篇文章主要介紹了前端設(shè)置cookie之vue-cookies使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中的transition封裝組件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中的transition封裝組件的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
基于 vue-skeleton-webpack-plugin 的骨架屏實(shí)戰(zhàn)
這篇文章主要介紹了基于 vue-skeleton-webpack-plugin 的骨架屏實(shí)戰(zhàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了如何使用Vite安裝和啟動(dòng)Vue3項(xiàng)目,并推薦了一些常用的第三方庫(kù),如js-tool-big-box、less或sass預(yù)處理器、axios請(qǐng)求庫(kù)以及Element?Plus?UI庫(kù),需要的朋友可以參考下2024-12-12