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

vue解決Not?allowed?to?load?local?resource問題的全過程

 更新時間:2022年10月18日 10:17:07   作者:相與還  
這篇文章主要給大家介紹了關(guān)于vue解決Not?allowed?to?load?local?resource問題的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

前言

在進(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)文章

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

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

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

    Vue中插入HTML代碼的方法

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

    vue.js移動端tab組件的封裝實踐實例

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

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

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

    Vue3獲取DOM節(jié)點(diǎn)的3種方式實例

    Vue本來無需操作DOM來更新界面,而且Vue也不推薦我們直接操作DOM,但是我們非要拿到DOM操作DOM怎么辦,下面這篇文章主要給大家介紹了關(guān)于Vue3獲取DOM節(jié)點(diǎn)的3種方式,需要的朋友可以參考下
    2023-02-02
  • Vue實現(xiàn)淘寶購物車三級選中功能詳解

    Vue實現(xiàn)淘寶購物車三級選中功能詳解

    這篇文章主要介紹了通過Vue實現(xiàn)淘寶購物車中三級選中的功能,文中的實現(xiàn)過程講解詳細(xì),對我們學(xué)習(xí)Vue有一定的幫助,感興趣的可以了解一下
    2022-01-01
  • vue.js中npm安裝教程圖解

    vue.js中npm安裝教程圖解

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

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

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

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

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

    vue cli 全面解析

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

最新評論