vue解決Not?allowed?to?load?local?resource問題的全過程
前言
在進(jìn)行通過本地路徑進(jìn)行加載圖片的時候,突然就報了這個問題
Not allowed to load local resource
這個是由于安全性的問題,導(dǎo)致瀏覽器禁止直接訪問本地文件
那么,這邊我說一下我具體是怎么解決的吧
問題描述
我的項目是用的vue的vantui框架+springboot
然后我后端給前端的數(shù)據(jù)是一個路徑,具體如下圖:
也就是一個本地文件路徑的集合
// 為了防止后續(xù)圖片失效看不到內(nèi)容,在這標(biāo)注其中一條數(shù)據(jù) D:\\EXAM_MATERIAL\\NEW-STAFF\\IMAGE\\B-0001\\B-0001 公司簡介_01.png
而我在頁面中的代碼是使用的是
// imagebase64是自定義的變量 <img :src="imgBase64" style="position: relative;width:100%;height:100%"/>
我用了一個自定義的變量直接接收路徑顯示給它
通過按鈕上一頁和下一頁改變自定義變量的值
如:以下代碼只寫成最主要的代碼,不包括樣式,以及不代表我項目中具體代碼
<template> <div> // 圖片顯示 <div> <img :src="imgBase64" style="position: relative;width:100%;height:100%"/> </div> // 按鈕控制上一頁和下一頁 <div> <button @click="lastPage">上一頁</button> <button @click="nextPage">下一頁</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ù)自己接口來獲?。? this.slideImageList = res.data.data // 設(shè)置初始顯示圖片 this.imgBase64 = this.slideImageList[0]; }) }, // 上一頁 lastPage() { if (this.currentPage !=0) { this.currentPage--; this.imgBase64 = this.slideImageList[this.currentPage]; } }, // 下一頁 nextPage() { this.currentPage++; this.imgBase64 = this.slideImageList[this.currentPage]; }, }, mounted() { // 加載頁面獲取數(shù)據(jù) this.getImage(); }, } </script>
然后就導(dǎo)致了這么一個問題出現(xiàn)
解決步驟
通過上面我們發(fā)現(xiàn),直接將文件路徑作為圖片顯示是不可用的,于是我對獲取后端接口數(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ù)自己接口來獲?。? this.slideImageList = res.data.data // 定義變量接收處理過的數(shù)據(jù) let urlList = []; // 以路徑D:\\EXAM_MATERIAL\\NEW-STAFF\\IMAGE\\B-0001\\B-0001 公司簡介_01.png為例 // 遍歷數(shù)據(jù) for (let i = 0; i < this.slideImageList.length;i++) { // 定義臨時變量接收遍歷后的每條數(shù)據(jù) let path = this.sildeImageList[i]; // 定義臨時變量截取獲取文件名稱 let name = path.substring(path.lastIndexOf("\\") + 1); // 定義臨時變量接收最終處理后的結(jié)果 let url = path.substring(0, path.lastIndexOf("\\") + 1) .replace("D:\\EXAM_MATERIAL", "/EXAM_MATERIAL") + encodeURI(name); // 將處理后的結(jié)果加入到臨時集合 urlList.push(url); } // 清空接收的后端數(shù)據(jù) this.slideImageList = []; // 接收處理后的結(jié)果 this.slideImageList = urlList; // 設(shè)置初始顯示圖片 this.imgBase64 = this.slideImageList[0]; }) }, // 上一頁 lastPage() { if (this.currentPage !=0) { this.currentPage--; this.imgBase64 = this.slideImageList[this.currentPage]; } }, // 下一頁 nextPage() { this.currentPage++; this.imgBase64 = this.slideImageList[this.currentPage]; }, }, mounted() { // 加載頁面獲取數(shù)據(jù) this.getImage(); }, } </script>
即:
// 獲取后端數(shù)據(jù)方法 getImage() { getImageList ().then(res => { // 接收數(shù)據(jù)(這里根據(jù)自己接口來獲?。? this.slideImageList = res.data.data // 設(shè)置初始顯示圖片 this.imgBase64 = this.slideImageList[0]; }) },
修改為:
// 獲取后端數(shù)據(jù)方法 getImage() { getImageList ().then(res => { // 接收數(shù)據(jù)(這里根據(jù)自己接口來獲取) this.slideImageList = res.data.data // 定義變量接收處理過的數(shù)據(jù) let urlList = []; // 以路徑D:\\EXAM_MATERIAL\\NEW-STAFF\\IMAGE\\B-0001\\B-0001 公司簡介_01.png為例 // 遍歷數(shù)據(jù) for (let i = 0; i < this.slideImageList.length;i++) { // 定義臨時變量接收遍歷后的每條數(shù)據(jù) let path = this.sildeImageList[i]; // 定義臨時變量截取獲取文件名稱 let name = path.substring(path.lastIndexOf("\\") + 1); // 定義臨時變量接收最終處理后的結(jié)果 let url = path.substring(0, path.lastIndexOf("\\") + 1) .replace("D:\\EXAM_MATERIAL", "/EXAM_MATERIAL") + encodeURI(name); // 將處理后的結(jié)果加入到臨時集合 urlList.push(url); } // 清空接收的后端數(shù)據(jù) this.slideImageList = []; // 接收處理后的數(shù)據(jù) this.slideImageList = urlList; // 設(shè)置初始顯示圖片 this.imgBase64 = this.slideImageList[0]; }) },
修改代碼后的結(jié)果
修改完之后,最終的結(jié)果如下:
結(jié)語
到此這篇關(guān)于vue解決Not allowed to load local resource問題的文章就介紹到這了,更多相關(guān)vue Not allowed to load local resource內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue.js表單驗證插件(vee-validate)的使用教程詳解
這篇文章主要介紹了vue.js表單驗證插件(vee-validate)的使用,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05