欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

相關(guān)文章

  • Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例

    Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例

    防抖節(jié)流是可以說(shuō)是一種優(yōu)化組件性能的技巧,可以有效減少組件中的渲染次數(shù)和計(jì)算量,本文主要介紹了Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例,感興趣的可以了解一下
    2024-04-04
  • Vue中插入HTML代碼的方法

    Vue中插入HTML代碼的方法

    這篇文章主要介紹了Vue中插入HTML代碼的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • vue.js移動(dòng)端tab組件的封裝實(shí)踐實(shí)例

    vue.js移動(dòng)端tab組件的封裝實(shí)踐實(shí)例

    本篇文章主要介紹了vue.js移動(dòng)端tab的封裝實(shí)踐實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • Vue綁定用戶接口實(shí)現(xiàn)代碼示例

    Vue綁定用戶接口實(shí)現(xiàn)代碼示例

    這篇文章主要介紹了Vue綁定用戶接口代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-11-11
  • Vue3獲取DOM節(jié)點(diǎn)的3種方式實(shí)例

    Vue3獲取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-02
  • Vue實(shí)現(xiàn)淘寶購(gòu)物車三級(jí)選中功能詳解

    Vue實(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-01
  • vue.js中npm安裝教程圖解

    vue.js中npm安裝教程圖解

    這篇文章主要介紹了vue.js中npm安裝教程圖解,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2018-04-04
  • vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略

    vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略

    這篇文章主要介紹了vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • vue.js表單驗(yàn)證插件(vee-validate)的使用教程詳解

    vue.js表單驗(yàn)證插件(vee-validate)的使用教程詳解

    這篇文章主要介紹了vue.js表單驗(yàn)證插件(vee-validate)的使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-05-05
  • vue cli 全面解析

    vue cli 全面解析

    vue是一套構(gòu)建用戶界面的漸進(jìn)式框架。這篇文章主要介紹了vue cli的相關(guān)知識(shí),本文給大家及時(shí)的非常全面,需要的朋友可以參考下
    2018-02-02

最新評(píng)論