前言

在进行通过本地路径进行加载图片的时候，突然就报了这个问题
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相关推荐

解决 Not allowed to load local resource 问题
今天在写KindEditor的上传文件时遇到了这个问题 Not allowed to load local resource 参考了晚上的资料后发现其中一个解决方法是把放回的绝对路径改为相对路径即可 ...
Not allowed to load local resource: file:///,浏览器禁止访问浏览器图片，文件解决方法
Not allowed to load local resource: file- 错误出现原因:浏览器出于安全考虑禁止直接读取本机文件(链接以file:///开头), 解决办法: 创建一个web服务 ...
浏览器报错Not allowed to load local resource:的解决办法,与网上大多数都不同,亲测有用！
浏览器报错Not allowed to load local resource:的解决办法,与网上大多数都不同,亲测有用! 起因报错原因吐槽解决办法参考起因因为深度学习用的是pytorch ...
上传图片,Not allowed to load local resource,springboot上传
最近朋友找我,帮她做一个招聘的网站的demo,本来是不想做的,谁让是一个美女呢,没办法, 程序猿嘛,看见美女就.嘻嘻.哦!扯远了,话不多说直接就上. 1.所需要pom依赖有: <dependen ...
Chrome无法打开文件的错误 [Not allowed to load local resource: file://XXXX]
问题描述  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional// ...
解决img标签src路径为本地路径访问受限问题:Not allowed to load local resource
随笔记录:遇到img标签想显示本地路径下的图片资源.谷歌浏览器不支持访问,找不到好的解决办法决定换个思路. img标签可显示base64转码的图片.将本地图片先进行base64转码,之后再img标签 ...
SpringBoot+Vue项目中遇到Not allowed to load local resource图片路径问题的两种解决方案（在后端映射本地路径或将图片转base64返回给前端）
一.报错截图第一种解决方案后端映射本地路径编写MyConfig类 Java代码[MyWebConfig] package com.wechat.front.utils;import org.sp ...
springboot整合pdfobject 预览pdf文件出现 Not allowed to load local resource : file:///c:/xxxx.pdf 报错的问题解决
浏览器不允许直接访问本地文件解决:设置springboot虚拟目录 @Configuration public class WebMvcConfig extends WebMvcConfigurer ...
小程序运行报错：[渲染层网络层错误] Failed to load local image /presource 的解决方案
一般而言,出现这种问题是因为使用vue进行小程序端数据渲染的时候出现了问题. 会出现以下报错: 问题代码: 出现的形式: 我当时是在点击上传的时候每次都报这个错误,所以就一直在思考哪里出了问题.找过另 ...
微信小程序渲染图片报错：[渲染层网络层错误] Failed to load local image resource
微信小程序渲染图片报错解决:[渲染层网络层错误] Failed to load local image resource 背景通过用户点击上传图片,通过res.tempFilePaths拿到用户上传 ...

vue解决Not allowed to load local resource

前言

问题描述

解决步骤

修改代码后的结果

结语

vue解决Not allowed to load local resource相关推荐

最新文章

热门文章