TP5+Vue+ElementUI读取图片出现的"Not allowed to load local resource"的问题

案件发生时的详细情况

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

遇到的问题（截图）

当事人情况

• 后台接口返回数据（只关注avatar）

• 前台获取和显示

  • 发起请求获取信息

• 赋值给data中的avatarPath

• 给el-avatar进行显示

详细调查后对案件的认识

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

案件的解决

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

  • 更改后的接口返回

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

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

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