vue解決Not?allowed?to?load?local?resource問(wèn)題的全過(guò)程

更新時(shí)間：2022年10月18日 10:17:07 作者：相與還

這篇文章主要給大家介紹了關(guān)于vue解決Not?allowed?to?load?local?resource問(wèn)題的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

前言

在進(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: