TP5+Vue+ElementUI读取图片出现的“Not allowed to load local resource“的问题_温斯顿顿吃不饱的博客-程序员信息网_vue not allowed to load local resource

技术标签: Pva工程师成长之路  vue  thinkphp  

案件发生时的详细情况

  • 前端和后台都是本地开发,后台放在Apache服务器上
  • 前端上传的用户头像,后台保存到本地,并保存图片路径
  • 前端要显示用户头像时,通过向后台发起请求就可以获取到头像的路径并拿来显示

遇到的问题(截图)

 not allowed to load local resource

当事人情况

  • 后台接口返回数据(只关注avatar)

在这里插入图片描述

  • 前台获取和显示

    • 发起请求获取信息

在这里插入图片描述

  • 赋值给data中的avatarPath

在这里插入图片描述

  • 给el-avatar进行显示

在这里插入图片描述

详细调查后对案件的认识

  • 浏览器有安全策略,不允许以绝对路径的形式来访问资源(看图就知道我用了从盘符开始的路径)
  • 后台部署在Apache服务器上,所以获取资源可以通过服务器地址来获取,这里用绝对路径真的是浪费表情!!!
  • 所以这是后台在保存图片路径的时候出现的问题,从后台修改

案件的解决

  • 后台修改保存的路径,保存从public目录之后开始到文件名的路径(uplaod/avatar/female.png)

    • 更改后的接口返回

在这里插入图片描述

  • 前端接收到头像的路径avatar后,拼接上服务器的地址

    • 这里要注意一定要加上***http://***,不然也是会访问不到的

在这里插入图片描述

  • 这样子就可以将头像显示出来啦

在这里插入图片描述

成长路上对自己所学的一些总结,各路大侠若有更好的办法望留言相助哇!
如果这篇文章对你有帮助的话请点帮我点个赞,让我知道我写的文章有帮助到他人哈哈哈,谢谢!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sinat_28745951/article/details/103726131

智能推荐

一个利用浏览器原生execCommand()方法实现的富文本编辑器_gogoend的博客-程序员信息网

这是一个利用浏览器原生execCommand()方法实现的富文本编辑器,同时具有本地保存、切换为纯文本编辑器的功能,仅用于参考(以及本人做期末作业233333)新手上路,Bug太多,功能不完善,代码、变量太乱,大佬别笑话,第一次写博,还请多多指教

python3.7安装步骤-Python 3.7.0安装教程(附安装包) | 我爱分享网_编程大乐趣的博客-程序员信息网

软件下载:Python 3.7.0_32/64位英文版:【安装前须知:1.安装全程须断开电脑网络,否则安装不成功;2.Python 3.7.0适用于WIN7/8/10系统,亲测可用!Python 3.7.0 WIN10 64位安装步骤:1.根据自己电脑系统的位数选择对应的Python 3.7.0软件安装包到电脑磁盘根目录或英文路径文件夹下,小编这里下载到Python37文件夹下,然后鼠标右击选择【...

做人工智能为什么经常要学 python?_润乾软件的博客-程序员信息网

当前,提到人工智能、数据科学几乎就一定会提到 Python,很多人工智能相关的课程实质上也都在大篇幅的讲 Python,有的初学者甚至认为人工智能和 Python 是划等号的,随着人工智能概念的火热几乎掀起了一股全民学 Python 的热潮。那么,作为一种计算机程序语言,Python 到底有何魅力,如此受到人工智能的喜爱。总结下来,主要就是两点:(1)丰富的类库支持Python 从面世以来逐渐发展出了一个大型、活跃的科学计算及数据分析社区,成为数据科学、机器学习和学术 / 工业界通用软件开发等领域的

Oracle数据库--- 当前时间往后加15分钟_Chris-disciple的博客-程序员信息网_当前时间加15分钟

今天碰到一个问题,就是把数据库的创建时间 在当前时间往后加15分钟。记录一下当时的写法:UPDATE VIP_RETURN_INFO cSET c.CREATETIME = SYSDATE+15/24/60WHEREc.RETURNSN = ‘170111RTV00396NH’;...

mybatis源码学习(四)_springe的博客-程序员信息网

mybatis全局配置文件加载在上一篇文章中,提到了SqlSessionFactoryBuilder通过调用XMLConfigBuilder里面的parse方法加载配置文件里面的各种资源。在parse方法中,主要调用parseConfiguration方法来加载配置信息,parseConfiguration方法如下: private void parseConfiguration(XNode ...

JavaSE基础(62) GUI窗口监听事件WindowListener_郑清的博客-程序员信息网_guiwindowlistener

实例:窗口的关闭、最小化.../** * WindowListener:窗口监听事件 ex:关闭、最小化... * @author Administrator */public class WindowListenerDemo { public static void main(String[] args) { // TODO Auto-generated method s...

随便推点

绝了!作为一名程序员我不忘初心,附赠课程+题库_m0_53537576的博客-程序员信息网

导语学历永远是横在我们进人大厂的一道门槛,好像无论怎么努力,总能被那些985,211 按在地上摩擦!不仅要被“他们”看不起,在HR挑选简历,学历这块就直接被刷下去了,连证明自己的机会也没有,学历真的这么重要吗?以前我的答案是的,总认为失败就是自己学历问题,总觉得一切不公平错误都是外部的因素,从来没有考虑过自己,自身是什么能力,几斤几两!但是经过这次阿里的面试,让我有了新的见解!你所认为的失败仅仅只是你不够努力的结果,程序员确实是高学历的行业,但是更多更重要的是技术的沉淀。感谢这几位阿里面试官,没有因为

记录 axios 设置请求头 application/x-www-form-urlencoded 无效的原因_0oIronhide的博客-程序员信息网

axios 已经全局设置了 application/x-www-form-urlencoded 请求头const Axios = Axios.create({ baseURL: 'https://XXX.cn', timeout: 6000})Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';但后续的post请求头依旧带的是 application/json是因为请

gorm通过callback实时更新缓存数据_Iron_Huang的博客-程序员信息网

title: “Gorm通过callback实时更新缓存数据”date: 2020-07-21T10:36:50+08:00draft: truecategories:golangtags:featured_image:在一个我们需要更新缓存数据的场景下时,有许多选择的余地,django中很多时候使用celery定时任务,但是单用celery定时任务也许无法保证数据的实时更新。比如django框架中包含了很多signal,单独使用signal的话并没有什么性能上的优势,通过结合一些类.

java 定时调用存储过程_用Kettle实现自动定时调用存储过程部署到Windows服务_航知道的博客-程序员信息网

1、首先需要用到的一些开发工具:JDK(我用的1.7)MyEclipse 2014JavaServiceJavaService可在官网下载,下载地址:http://javaservice.objectweb.org,下载之前官方需要确认你的一些个人信息,提交后可以进入资源下载页面,我这里下载的是2.0.10版本。解压后有很多文件,我们只需要用到其中的JavaService.exe。2、接着编写一个...

破解“超级穿海”工程难题,BIM+3D GIS怎么做?_supermapsupport的博客-程序员信息网

某跨海段隧道工程是国内首次大直径穿越岩溶强烈发育区的“超级穿海”工程在如此庞大的工程当中这条隧道需穿越马蜂窝状的岩溶区域该区域线岩溶率13.7%存在三大溶洞群,最大溶洞高29米面临着安全风险高、施工难度大等系列问题针对工程中的种种困难,中铁六院采用了钻孔+CT+超前钻三种方式探明溶洞为三维直观、完整的查看溶洞状况、实时表达盾构掘进与溶洞时空关系指导施工项目需引入BIM平台应...

推荐文章

热门文章

相关标签