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 相关文章推荐
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
layUI实现列表查询功能
Jul 27 Javascript
react项目从新建到部署的实现示例
Feb 19 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 字符串分割和比较
2009/10/06 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python ftp上传文件
2016/02/13 Python
Python序列操作之进阶篇
2016/12/08 Python
python程序控制NAO机器人行走
2019/04/29 Python
pytorch的batch normalize使用详解
2020/01/15 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
python一些性能分析的技巧
2020/08/30 Python
关于python中remove的一些坑小结
2021/01/04 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
日语系毕业生推荐信
2013/11/11 职场文书
工厂门卫岗位职责
2013/11/25 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
Python实现视频中添加音频工具详解
2021/12/06 Python