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