Vue动态加载图片在跨域时无法显示的问题及解决方法


Posted in Javascript onMarch 10, 2020

写在前面

小记,就简单写了 。问题:VUE开发时因为要访问后端的接口所以要配置请求转发,如果直接转发全部请求,那么VUE动态绑定的src也会转发到后端,因为图片在前端,所以会收到404 NOT FOUND的报错。

常规的请求转发

在vue-cli3内,直接编辑vue.config.js,如下:

let proxyObj={};
proxyObj['/']={
  ws:false,
  target:'http://localhost:8023',//后端地址
  changeOrigin:true,
  pathRewrite:{
    '^/':''
  }
};
module.exports={
  devServer:{
    host:'localhost',
    port:8080,
    proxy:proxyObj
  }
};

代码很简单,就不解释了,这段代码就是把所有请求都转发到了后端。

常规的src动态绑定

如下:

// position.duiduorob为data内定义的字段
<img :src="require(`@/assets/image/dianhan${position.duiduorob}.png`)" >

值得注意的是,需要用require(``)这样的方法,如果直接填写图片地址如:

<img :src="'../../assets/image/dianhan'+position.duiduorob+'.png'">

浏览器内会找不到该图片。原因:通常在编译运行后,图片会被webpack统一打包到localhost:8080/static/img/[文件名].png,因为是上述过程动态加载的,所以url-loader无法解析图片地址,所以导致上述方法中的图片无法在浏览器内显示。解决方法就是通过require(``)这样的方法将图片作为模块被加载。

跨域请求转发时找不到图片

前面也说了,就是因为转发了全部请求,所以上述require(``)过后,浏览器去后端找图片了,导致找不到。
解决思路:只转发要访问后端接口的请求,其它不变。
所以其实就是过滤一下,添加一个条件。如下:要访问后端的请求在url上加一个/api即可

let proxyObj={};
proxyObj['/api']={ //url前部加上'/api'
  ws:false,
  target:'http://localhost:8023',//后端地址
  changeOrigin:true,
  pathRewrite:{
    '^/api':'' //到了后端去掉/api
  }
};
module.exports={
  devServer:{
    host:'localhost',
    port:8080,
    proxy:proxyObj
  }
};

所以在其他部分全部不变的情况下,只需在你封装的http请求方法内给url参数前加一个'/api'前缀,如下:

export const getRequst=(url,params)=>{
  return axios({
    method:'get',
    url:'/api'+ url,//原来为 url:url,
    data:params,
  })
};

这下访问后端的请求全部在url上套上了'/api',而其它请求也不会被转发到后端了。

知识点补充:vue中解决跨域问题

方法1.后台更改header

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

方法2.使用JQuery提供的jsonp

methods: { 
 getData () { 
  var self = this 
  $.ajax({ 
   url: 'http://f.apiplus.cn/bj11x5.json', 
   type: 'GET', 
   dataType: 'JSONP', 
   success: function (res) { 
    self.data = res.data.slice(0, 3) 
    self.opencode = res.data[0].opencode.split(',') 
   } 
  }) 
 } 
}

方法3.使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)

例如请求的url:“http://f.apiplus.cn/bj11x5.json”

1、打开config/index.js,在proxyTable中添写如下代码:

proxyTable: { 
 '/api': { //使用"/api"来代替"http://f.apiplus.c" 
  target: 'http://f.apiplus.cn', //源地址 
  changeOrigin: true, //改变源 
  pathRewrite: { 
   '^/api': 'http://f.apiplus.cn' //路径重写 
   } 
 } 
}

2、使用axios请求数据时直接使用“/api”:

getData () { 
 axios.get('/api/bj11x5.json', function (res) { 
  console.log(res) 
 })

通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:

let serverUrl = '/api/' //本地调试时 
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时 
export default { 
 dataUrl: serverUrl + 'bj11x5.json' 
}

附:

方法二引入jq

1.下载依赖

cnpm install jquery --save-dev

2.在webpack.base.conf.js文件中加入

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
  })
 ],

3.在需要的temple里引入也可以在main.js里全局引入

import $ from 'jquery'

eg:

<template>
 <div class="source">
   source{{data}}
 </div>
</template>
<script>
import $ from 'jquery'
 export default({
  name:"source",
  data(){
   return{
    data:""
   }
  },
  created(){
   this.getData()
  },
  methods:{
   getData () {
    var self = this
    $.ajax({
     url: '你要请求的url',
     type: 'GET',
     dataType: 'JSONP',
     success: function (res) {
      self.data = res.result
     }
    })
   }
  }
 })
</script>
<style>
</style>

总结

到此这篇关于Vue动态加载图片在跨域时无法显示的问题及解决方法的文章就介绍到这了,更多相关vue动态加载图片跨域无法显示内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 #Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 #Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 #Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 #Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 #Javascript
vue中的使用token的方法示例
Mar 10 #Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 #Javascript
You might like
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
YII框架关联查询操作示例
2019/04/29 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
python 合并文件的具体实例
2013/08/08 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
用python做游戏的细节详解
2019/06/25 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
django框架cookie和session用法实例详解
2019/12/10 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
优秀教师工作感言
2014/02/16 职场文书
保险公司晨会主持词
2014/03/22 职场文书
保护母亲河倡议书
2014/04/14 职场文书
学校就业推荐信范文
2014/05/19 职场文书
李强为自己工作观后感
2015/06/11 职场文书
保护地球的宣传语
2015/07/13 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书