前言

在進行通過本地路徑進行加載圖片的時候，突然就報了這個問題
Not allowed to load local resource
這個是由于安全性的問題，導致瀏覽器禁止直接訪問本地文件
那么，這邊我說一下我具體是怎么解決的吧

問題描述

我的項目是用的vue的vantui框架+springboot
然后我后端給前端的數據是一個路徑，具體如下圖:

也就是一個本地文件路徑的集合

// 為了防止后續圖片失效看不到內容，在這標注其中一條數據 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> // 獲取后端數據接口 import { getImageList } from "../xxx" export default {name: "xxx",// 自定義屬性data() {return {slideImageList: [], // 接收后端數據currentPage: 0, // 當前顯示第幾張圖片imgBase64: "", // 顯示到圖片的信息}},// 方法methods: {// 獲取后端數據方法getImage() {getImageList ().then(res => {// 接收數據（這里根據自己接口來獲取）this.slideImageList = res.data.data// 設置初始顯示圖片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() {// 加載頁面獲取數據this.getImage();}, } </script>

然后就導致了這么一個問題出現

解決步驟

通過上面我們發現，直接將文件路徑作為圖片顯示是不可用的，
于是我對獲取后端接口數據作了處理

<script> // 獲取后端數據接口 import { getImageList } from "../xxx" export default {name: "xxx",// 自定義屬性data() {return {slideImageList: [], // 接收后端數據currentPage: 0, // 當前顯示第幾張圖片imgBase64: "", // 顯示到圖片的信息}},// 方法methods: {// 獲取后端數據方法getImage() {getImageList ().then(res => {// 接收數據（這里根據自己接口來獲取）this.slideImageList = res.data.data// 定義變量接收處理過的數據let urlList = [];// 以路徑D:\\EXAM_MATERIAL\\NEW-STAFF\\IMAGE\\B-0001\\B-0001 公司簡介_01.png為例// 遍歷數據for (let i = 0; i < this.slideImageList.length;i++) {// 定義臨時變量接收遍歷后的每條數據let path = this.sildeImageList[i];// 定義臨時變量截取獲取文件名稱let name = path.substring(path.lastIndexOf("\\") + 1);// 定義臨時變量接收最終處理后的結果let url = path.substring(0, path.lastIndexOf("\\") + 1).replace("D:\\EXAM_MATERIAL", "/EXAM_MATERIAL") + encodeURI(name);// 將處理后的結果加入到臨時集合urlList.push(url);}// 清空接收的后端數據this.slideImageList = [];// 接收處理后的結果this.slideImageList = urlList;// 設置初始顯示圖片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() {// 加載頁面獲取數據this.getImage();}, } </script>

即：

// 獲取后端數據方法getImage() {getImageList ().then(res => {// 接收數據（這里根據自己接口來獲取）this.slideImageList = res.data.data// 設置初始顯示圖片this.imgBase64 = this.slideImageList[0];})},

修改為:

// 獲取后端數據方法getImage() {getImageList ().then(res => {// 接收數據（這里根據自己接口來獲取）this.slideImageList = res.data.data// 定義變量接收處理過的數據let urlList = [];// 以路徑D:\\EXAM_MATERIAL\\NEW-STAFF\\IMAGE\\B-0001\\B-0001 公司簡介_01.png為例// 遍歷數據for (let i = 0; i < this.slideImageList.length;i++) {// 定義臨時變量接收遍歷后的每條數據let path = this.sildeImageList[i];// 定義臨時變量截取獲取文件名稱let name = path.substring(path.lastIndexOf("\\") + 1);// 定義臨時變量接收最終處理后的結果let url = path.substring(0, path.lastIndexOf("\\") + 1).replace("D:\\EXAM_MATERIAL", "/EXAM_MATERIAL") + encodeURI(name);// 將處理后的結果加入到臨時集合urlList.push(url);}// 清空接收的后端數據this.slideImageList = [];// 接收處理后的數據this.slideImageList = urlList;// 設置初始顯示圖片this.imgBase64 = this.slideImageList[0];})},

修改代碼后的結果

修改完之后，最終的結果如下:

結語

以上，為vue解決Not allowed to load local resource的過程

總結

以上是生活随笔為你收集整理的vue解决Not allowed to load local resource的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。