vue報錯Not?allowed?to?load?local?resource的解決辦法
更新時間：2023年07月24日 11:59:06 作者：影子落人間
這篇文章主要給大家介紹了關于vue報錯Not?allowed?to?load?local?resource的解決辦法,這個錯誤是因為Vue不能加載本地資源的原因,需要的朋友可以參考下
問題描述
我在前后端分離項目中，在前端vue里面<img>標簽中通過絕對路徑訪問本地圖片，在加載圖片的時候會報出Not allowed to load local resource: ，這個問題我也進行了相關的搜索，出現這個問題的原因是因為瀏覽器出于安全因素，禁止通過絕對路徑訪問圖片，需要通過虛擬路徑進行訪問，下面我會簡單清楚的說明解決的方法。
解決方法
通過創(chuàng)建一個配置類，配置類去實現 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 方法里面填寫你想要設置的虛擬路徑，下面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
總結
以上就是vue報錯Not allowed to load local resource的解決辦法的詳細內容，更多關于vue報錯Not allowed to load local resource的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了VUE中的打包刪除文件、圖片的HASH碼，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue 添加和編輯用同一個表單,el-form表單提交后清空表單數據操作
這篇文章主要介紹了vue 添加和編輯用同一個表單,el-form表單提交后清空表單數據操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了vue src動態(tài)加載請求獲取圖片的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
在有些情況下需要使用不同的語言來完成一個項目,因此就有可能出現不同語言的程序之間的相互調用,下面這篇文章主要給大家介紹了關于vue.js調用python腳本并給腳本傳數據的相關資料,需要的朋友可以參考下2024-03-03
在瀏覽器上下滾動的時候,如何距離頂部的距離大于78px,吸頂顯示,小于78px則隱藏,所以本文小編給大家介紹了Vue設置導航吸頂的詳細教程,文中有相關的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了前端設置cookie之vue-cookies使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue中的transition封裝組件的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
基于 vue-skeleton-webpack-plugin 的骨架屏實戰(zhàn)
這篇文章主要介紹了基于 vue-skeleton-webpack-plugin 的骨架屏實戰(zhàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了如何使用Vite安裝和啟動Vue3項目,并推薦了一些常用的第三方庫,如js-tool-big-box、less或sass預處理器、axios請求庫以及Element?Plus?UI庫,需要的朋友可以參考下2024-12-12