位置: IT常识 - 正文

vue解决Not allowed to load local resource(vue解决跨域问题)

编辑:rootadmin
vue解决Not allowed to load local resource 前言

推荐整理分享vue解决Not allowed to load local resource(vue解决跨域问题),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue解决中文乱码,vue解决异步取值问题,vue解决浏览器兼容性问题,vue解决异步请求问题,vue解决数据量过大的问题,vue解决跨域问题,vue解决数据量过大的问题,vue解决跨域的几种办法,内容如对您有帮助,希望把文章链接给更多的朋友!

在进行通过本地路径进行加载图片的时候,突然就报了这个问题 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%"/>vue解决Not allowed to load local resource(vue解决跨域问题)

我用了一个自定义的变量直接接收路径显示给它 通过按钮上一页和下一页改变自定义变量的值 如: 以下代码只写成最主要的代码,不包括样式,以及不代表我项目中具体代码

<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的过程

本文链接地址:https://www.jiuchutong.com/zhishi/281412.html 转载请保留说明!

上一篇:rtmservice.exe - rtmservice是什么进程 有什么用

下一篇:springboot整合Minio + vue 实现文件分片上传(完整代码)(springboot整合了哪些框架)

  • 工业企业销售收入税率
  • 怎么计算土地增值税的相关税金
  • 独立法人和法人独资的区别
  • 小规模普票怎么冲红
  • 个人所得税申报操作流程
  • 社保基数3125交多少钱
  • 陈列费税率多少
  • 电子承兑汇票是到期日前10天提示承兑吗
  • 现金支票作废需要签字吗
  • 快递快件丢失
  • 企业更名后账务如何处理
  • 逾期包装物押金消费税会计分录
  • 公立医院固定资产贷款相关规定
  • 公司的企业所得税和个人所得税
  • 房地产开发成本占比
  • 购买汽车可以开普通发票吗
  • 成本是否有含税金额
  • 本月合计怎么做
  • 抵押贷款逾期怎么处理抵押物
  • 认证成功次月何时补发
  • 日用品做账时放什么东西
  • 在windows 7中
  • 记账凭证摘要的填写要求有
  • 公司股权变更后税务没有变更会有什么后果
  • nmeo.exe是什么
  • 实例讲解yii2.0在php命令行中运行的步骤
  • 企业发生的利得和损失应计入所有者权益
  • 差旅费报销会计凭证
  • 非货币性资产投资计入什么科目
  • php数据库连接池 实例
  • laravel基础
  • 落基山国家公园攻略
  • 股权置换和股权转让
  • redis php实例
  • 劳务派遣开具发票
  • 滴滴出行发票税率是多少
  • 织梦专题页模板
  • pythonjam怎么用
  • 分期付款的消费税怎么计算
  • 生产企业出口货物必须以什么为计税依据计算免抵退税额
  • 2021年财政部令68号
  • sql自定义
  • 摊余成本通俗易懂
  • 个贷系统平账专户怎么做分录
  • 买赠行为的会计处理
  • 应付账款扣除赔偿后开发票吗
  • 城建税如何计提税金
  • 公司注销前如何先注销工会
  • 公司注销未认证怎么处理
  • 建筑工程社会实践报告
  • 未使用的固定资产计提折旧计入什么科目
  • 制造费用如何控制
  • 电信线路租用费用
  • 人们对餐饮业的要求
  • 法人章和财务章尺寸
  • 投资收益科目在利润表中怎么填
  • 不是企业职工能否挂靠企业交社保
  • 分期付款购无形资产怎么入账?
  • 公司法人借款给企业属于关联交易吗?
  • 差旅费车票是否可以报销
  • 税收会计记账方法
  • 查看sqlserver操作记录
  • sql实现分组查询的短语
  • mysql速成要多久
  • 杭州租房补贴社保断缴影响
  • ubuntu16.04创建用户
  • windows7自动开机脚本文件
  • 关闭gui引导有什么用
  • windows临时文件在哪里
  • mac 查看当前用户
  • win10 20h2怎么更新
  • linux批量管理平台
  • linux的curl
  • js 判断一个数字是否相等
  • 通过手机号怎么查对方的位置
  • linux ls-l命令详解
  • js控制浏览器返回按钮
  • 自定义水印相机
  • 个人在税务局一个月能开多少
  • 陕西宝鸡国税人才招聘
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设