位置: 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整合了哪些框架)

  • 房产税一律按房产价值计征
  • 土地使用税返还是否征税
  • 预付款类发票可抵扣吗
  • 无发票入账违反哪条法律
  • 缴纳契约计税依据包含增值税吗
  • 医院增值税免税性质代码是什么
  • 企业购房税费政策
  • 购买固定资产进项税率
  • 外管证报验核销
  • 营业范围之外的产品可以出售吗
  • 销售折让的税收分类编码
  • 2019年小规模纳税人免征增值税政策
  • 年薪制与月薪制的优与劣
  • 金税服务费会计分录
  • 电子普票开具的最新文件
  • 增值税专用发票的税率是多少啊
  • 发票需要写真名吗
  • 结转利润分配分录怎么写
  • 销售嵌入式软件产品发票如何开具
  • 中秋福利发放现金文案怎么写
  • php destruct
  • 当月不生产,生产成本怎么处理
  • php实战
  • kms.exe
  • laravel enum
  • 新办企业工商需要什么手续
  • centos下file_put_contents()无法写入文件的原因及解决方法
  • vue项目更新后还是老代码
  • php与服务器的关系
  • 增值税发票完税证明图片
  • 税务稽查补税
  • 食堂洗碗机操作规程
  • 用支票偿还货款
  • python dup函数
  • vue使用高德地图闪白屏
  • react生命周期执行顺序
  • 进项税额转出会计分录
  • access中文版
  • 增值税纳税人放弃免税权的规定
  • 其他应收款和其他应付款可以通用吗
  • 收到银行手续费已做后期收到发票怎么做
  • 工程物资属于什么项目
  • 不同银行的存款
  • 公司办公室装修装修
  • 汽车加油费属于交通费用吗
  • 待抵扣进项税额和待认证进项税额的区别
  • 执行企业会计准则和小企业会计准则的区别
  • 建筑劳务没有合同能起诉吗
  • 劳务公司的劳务税是多少
  • 全额抵扣怎么申报
  • 办公用品怎么开大额发票
  • 会计岗位职责风险点及防控措施
  • sql语句 时间
  • mac声音无法调节
  • wp7.8升级wp8
  • 用u盘怎么装系统win10
  • win7系统怎么禁用数字签名
  • 水下摄影技巧
  • opengl怎么学
  • 批处理命令大全及用法
  • Unity3D游戏开发(第2版)pdf
  • Linux数据库备份的命令
  • javascript html5移动端轻松实现文件上传
  • js原生方法大全
  • nodemcu web
  • nodejs爬虫模拟浏览器
  • windows node.js
  • unity link.xml
  • service与activity数据交互
  • android性能优化面试题
  • 20行的python编程题
  • js并且判断
  • js弹出提示窗口
  • 深入理解计算机系统
  • 网页全屏是哪个键
  • jquery技巧
  • python优先级顺序
  • 中国税务局河北省税务局官网
  • 国地税合并人员瘦身
  • 建筑一般纳税人开3%
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设