如何通过Vue彻底解决不允许加载本地资源的问题？

本文共计1813个文字，预计阅读时间需要8分钟。

目录+前言+问题描述+解决方案+修改代码后的结果+结语+前言+在进行本地路径加载图片时，突然遇到了这个问题：Not allowed to load local resource。这是一个由于安全性问题导致的错误。下面我将详细描述问题和解决方案。+问题描述+在尝试通过本地路径加载图片时，浏览器报错：Not allowed to load local resource。这通常是因为浏览器的安全策略限制了从本地路径加载资源。+解决方案+为了解决这个问题，你可以尝试以下步骤：1. 确保图片文件与HTML文件位于同一目录下。2. 使用绝对路径而不是相对路径来引用图片。3. 如果可能，将图片上传到服务器，并使用服务器上的URL来引用图片。+修改代码后的结果+按照上述步骤修改代码后，图片成功加载，问题解决。+结语+通过以上步骤，我们成功解决了本地路径加载图片时的安全限制问题。+前言+在本地路径加载图片时，遇到了Not allowed to load local resource的错误。这个问题是由于浏览器安全策略导致的。接下来，我将详细说明解决方案。+问题描述+当尝试从本地路径加载图片时，浏览器显示错误：Not allowed to load local resource。这表明浏览器不允许从本地文件系统加载资源。+解决方案+以下是解决这个问题的方法：1. 确保图片文件与HTML文件位于同一目录下。2. 使用绝对路径而不是相对路径来引用图片。3. 将图片上传到服务器，并使用服务器上的URL引用图片。+修改代码后的结果+根据解决方案修改代码后，图片成功加载，问题得到解决。+结语+通过以上步骤，我们成功解决了从本地路径加载图片时的安全限制问题。

目录

• 前言
• 问题描述
• 解决步骤
• 修改代码后的结果
• 结语

前言

在进行通过本地路径进行加载图片的时候，突然就报了这个问题

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解决Notallowedtoloadlocalresource问题的文章就介绍到这了,更多相关vueNotallowedtoloadlocalresource内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！