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 相关文章推荐
js中复制行和删除行的操作实例
Jun 25 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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获取字段名示例分享
2014/03/03 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
python中yaml配置文件模块的使用详解
2018/04/27 Python
pytorch数据预处理错误的解决
2020/02/20 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
优秀求职自荐信怎样写
2013/12/18 职场文书
农村党支部先进事迹
2014/01/14 职场文书
素质拓展感言
2014/01/29 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
培训计划通知
2015/07/15 职场文书
2016年母亲节广告语
2016/01/28 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
mysql联合索引的使用规则
2021/06/23 MySQL
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL