vue解決Not?allowed?to?load?local?resource問(wèn)題的全過(guò)程
前言
在進(jìn)行通過(guò)本地路徑進(jìn)行加載圖片的時(shí)候,突然就報(bào)了這個(gè)問(wèn)題
Not allowed to load local resource
這個(gè)是由于安全性的問(wèn)題,導(dǎo)致瀏覽器禁止直接訪問(wèn)本地文件
那么,這邊我說(shuō)一下我具體是怎么解決的吧
問(wèn)題描述
我的項(xiàng)目是用的vue的vantui框架+springboot
然后我后端給前端的數(shù)據(jù)是一個(gè)路徑,具體如下圖:
也就是一個(gè)本地文件路徑的集合
// 為了防止后續(xù)圖片失效看不到內(nèi)容,在這標(biāo)注其中一條數(shù)據(jù) D:\\EXAM_MATERIAL\\NEW-STAFF\\IMAGE\\B-0001\\B-0001 公司簡(jiǎn)介_(kāi)01.png
而我在頁(yè)面中的代碼是使用的是
// imagebase64是自定義的變量 <img :src="imgBase64" style="position: relative;width:100%;height:100%"/>
我用了一個(gè)自定義的變量直接接收路徑顯示給它
通過(guò)按鈕上一頁(yè)和下一頁(yè)改變自定義變量的值
如:以下代碼只寫成最主要的代碼,不包括樣式,以及不代表我項(xiàng)目中具體代碼
<template> <div> // 圖片顯示 <div> <img :src="imgBase64" style="position: relative;width:100%;height:100%"/> </div> // 按鈕控制上一頁(yè)和下一頁(yè) <div> <button @click="lastPage">上一頁(yè)</button> <button @click="nextPage">下一頁(yè)</button> </div> <div> </template> <script> // 獲取后端數(shù)據(jù)接口 import { getImageList } from "../xxx" export default { name: "xxx", // 自定義屬性 data() { return { slideImageList: [], // 接收后端數(shù)據(jù) currentPage: 0, // 當(dāng)前顯示第幾張圖片 imgBase64: "", // 顯示到圖片的信息 } }, // 方法 methods: { // 獲取后端數(shù)據(jù)方法 getImage() { getImageList ().then(res => { // 接收數(shù)據(jù)(這里根據(jù)自己接口來(lái)獲?。? this.slideImageList = res.data.data // 設(shè)置初始顯示圖片 this.imgBase64 = this.slideImageList[0]; }) }, // 上一頁(yè) lastPage() { if (this.currentPage !=0) { this.currentPage--; this.imgBase64 = this.slideImageList[this.currentPage]; } }, // 下一頁(yè) nextPage() { this.currentPage++; this.imgBase64 = this.slideImageList[this.currentPage]; }, }, mounted() { // 加載頁(yè)面獲取數(shù)據(jù) this.getImage(); }, } </script>
然后就導(dǎo)致了這么一個(gè)問(wèn)題出現(xiàn)
解決步驟
通過(guò)上面我們發(fā)現(xiàn),直接將文件路徑作為圖片顯示是不可用的,于是我對(duì)獲取后端接口數(shù)據(jù)作了處理
<script> // 獲取后端數(shù)據(jù)接口 import { getImageList } from "../xxx" export default { name: "xxx", // 自定義屬性 data() { return { slideImageList: [], // 接收后端數(shù)據(jù) currentPage: 0, // 當(dāng)前顯示第幾張圖片 imgBase64: "", // 顯示到圖片的信息 } }, // 方法 methods: { // 獲取后端數(shù)據(jù)方法 getImage() { getImageList ().then(res => { // 接收數(shù)據(jù)(這里根據(jù)自己接口來(lái)獲取) this.slideImageList = res.data.data // 定義變量接收處理過(guò)的數(shù)據(jù) let urlList = []; // 以路徑D:\\EXAM_MATERIAL\\NEW-STAFF\\IMAGE\\B-0001\\B-0001 公司簡(jiǎn)介_(kāi)01.png為例 // 遍歷數(shù)據(jù) for (let i = 0; i < this.slideImageList.length;i++) { // 定義臨時(shí)變量接收遍歷后的每條數(shù)據(jù) let path = this.sildeImageList[i]; // 定義臨時(shí)變量截取獲取文件名稱 let name = path.substring(path.lastIndexOf("\\") + 1); // 定義臨時(shí)變量接收最終處理后的結(jié)果 let url = path.substring(0, path.lastIndexOf("\\") + 1) .replace("D:\\EXAM_MATERIAL", "/EXAM_MATERIAL") + encodeURI(name); // 將處理后的結(jié)果加入到臨時(shí)集合 urlList.push(url); } // 清空接收的后端數(shù)據(jù) this.slideImageList = []; // 接收處理后的結(jié)果 this.slideImageList = urlList; // 設(shè)置初始顯示圖片 this.imgBase64 = this.slideImageList[0]; }) }, // 上一頁(yè) lastPage() { if (this.currentPage !=0) { this.currentPage--; this.imgBase64 = this.slideImageList[this.currentPage]; } }, // 下一頁(yè) nextPage() { this.currentPage++; this.imgBase64 = this.slideImageList[this.currentPage]; }, }, mounted() { // 加載頁(yè)面獲取數(shù)據(jù) this.getImage(); }, } </script>
即:
// 獲取后端數(shù)據(jù)方法 getImage() { getImageList ().then(res => { // 接收數(shù)據(jù)(這里根據(jù)自己接口來(lái)獲?。? this.slideImageList = res.data.data // 設(shè)置初始顯示圖片 this.imgBase64 = this.slideImageList[0]; }) },
修改為:
// 獲取后端數(shù)據(jù)方法 getImage() { getImageList ().then(res => { // 接收數(shù)據(jù)(這里根據(jù)自己接口來(lái)獲取) this.slideImageList = res.data.data // 定義變量接收處理過(guò)的數(shù)據(jù) let urlList = []; // 以路徑D:\\EXAM_MATERIAL\\NEW-STAFF\\IMAGE\\B-0001\\B-0001 公司簡(jiǎn)介_(kāi)01.png為例 // 遍歷數(shù)據(jù) for (let i = 0; i < this.slideImageList.length;i++) { // 定義臨時(shí)變量接收遍歷后的每條數(shù)據(jù) let path = this.sildeImageList[i]; // 定義臨時(shí)變量截取獲取文件名稱 let name = path.substring(path.lastIndexOf("\\") + 1); // 定義臨時(shí)變量接收最終處理后的結(jié)果 let url = path.substring(0, path.lastIndexOf("\\") + 1) .replace("D:\\EXAM_MATERIAL", "/EXAM_MATERIAL") + encodeURI(name); // 將處理后的結(jié)果加入到臨時(shí)集合 urlList.push(url); } // 清空接收的后端數(shù)據(jù) this.slideImageList = []; // 接收處理后的數(shù)據(jù) this.slideImageList = urlList; // 設(shè)置初始顯示圖片 this.imgBase64 = this.slideImageList[0]; }) },
修改代碼后的結(jié)果
修改完之后,最終的結(jié)果如下:
結(jié)語(yǔ)
到此這篇關(guān)于vue解決Not allowed to load local resource問(wèn)題的文章就介紹到這了,更多相關(guān)vue Not allowed to load local resource內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例
防抖節(jié)流是可以說(shuō)是一種優(yōu)化組件性能的技巧,可以有效減少組件中的渲染次數(shù)和計(jì)算量,本文主要介紹了Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-04-04vue.js移動(dòng)端tab組件的封裝實(shí)踐實(shí)例
本篇文章主要介紹了vue.js移動(dòng)端tab的封裝實(shí)踐實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06Vue3獲取DOM節(jié)點(diǎn)的3種方式實(shí)例
Vue本來(lái)無(wú)需操作DOM來(lái)更新界面,而且Vue也不推薦我們直接操作DOM,但是我們非要拿到DOM操作DOM怎么辦,下面這篇文章主要給大家介紹了關(guān)于Vue3獲取DOM節(jié)點(diǎn)的3種方式,需要的朋友可以參考下2023-02-02Vue實(shí)現(xiàn)淘寶購(gòu)物車三級(jí)選中功能詳解
這篇文章主要介紹了通過(guò)Vue實(shí)現(xiàn)淘寶購(gòu)物車中三級(jí)選中的功能,文中的實(shí)現(xiàn)過(guò)程講解詳細(xì),對(duì)我們學(xué)習(xí)Vue有一定的幫助,感興趣的可以了解一下2022-01-01vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略
這篇文章主要介紹了vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue.js表單驗(yàn)證插件(vee-validate)的使用教程詳解
這篇文章主要介紹了vue.js表單驗(yàn)證插件(vee-validate)的使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05