vue報(bào)錯(cuò)Not?allowed?to?load?local?resource的解決辦法
問題描述
我在前后端分離項(xiàng)目中，在前端vue里面<img>標(biāo)簽中通過絕對(duì)路徑訪問本地圖片，在加載圖片的時(shí)候會(huì)報(bào)出Not allowed to load local resource: ，這個(gè)問題我也進(jìn)行了相關(guān)的搜索，出現(xiàn)這個(gè)問題的原因是因?yàn)闉g覽器出于安全因素，禁止通過絕對(duì)路徑訪問圖片，需要通過虛擬路徑進(jìn)行訪問，下面我會(huì)簡(jiǎn)單清楚的說明解決的方法。
解決方法
通過創(chuàng)建一個(gè)配置類，配置類去實(shí)現(xiàn) WebMvcConfigurer 接口，重寫里面的
addResourceHandlers 方法。
@Configuration
public class PictureConversionConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
/**
* 資源映射路徑
* addResourceHandler：訪問映射路徑
* 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實(shí)現(xiàn)網(wǎng)頁(yè)截圖和截屏功能
網(wǎng)頁(yè)截圖與截屏功能在許多Web應(yīng)用程序中都非常有用,Vue.js作為一個(gè)流行的JavaScript框架,提供了許多工具和庫(kù)來(lái)簡(jiǎn)化網(wǎng)頁(yè)截圖和截屏的實(shí)現(xiàn),本文將介紹如何使用Vue來(lái)實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)截圖和截屏功能的示例,包括使用html2canvas庫(kù)和vue-cropper庫(kù),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue細(xì)節(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue項(xiàng)目打包后怎樣優(yōu)雅的解決跨域,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue2 自定義 動(dòng)態(tài)組件的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了手寫實(shí)現(xiàn)Vue計(jì)算屬性，本文從一個(gè)簡(jiǎn)單的計(jì)算屬性例子開始，一步步實(shí)現(xiàn)了計(jì)算屬性。并且針對(duì)這個(gè)例子，詳細(xì)分析了頁(yè)面渲染時(shí)的整個(gè)代碼執(zhí)行邏輯，需要的小伙伴可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue3中Watch監(jiān)聽事件的使用的相關(guān)資料，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue3有一定的幫助，需要的可以參考一下2023-02-02
這篇文章主要介紹了vue2路由表中異步加載組件命名方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue-cli創(chuàng)建項(xiàng)目ERROR?in?Conflict:?Multiple?assets?emit?dif
最近vue/cli創(chuàng)建項(xiàng)目后出現(xiàn)了錯(cuò)誤,下面這篇文章主要給大家介紹了關(guān)于vue-cli創(chuàng)建項(xiàng)目ERROR?in?Conflict:?Multiple?assets?emit?different?content?to?the?same?filename?index.html問題的解決辦法,需要的朋友可以參考下2023-02-02
vue+elementUI封裝一個(gè)根據(jù)后端變化的動(dòng)態(tài)table(完整代碼)
這篇文章主要介紹了vue+elementUI,封裝一個(gè)根據(jù)后端變化的動(dòng)態(tài)table,實(shí)現(xiàn)了自動(dòng)生成和插槽兩個(gè)方式，主要把el-table 和el-pagination封裝在一起，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue卡片式點(diǎn)擊切換圖片組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06