vue src动态加载请求获取图片的方法


Posted in Javascript onOctober 17, 2018

一. 加载本地图片

1.图片目录 

 vue src动态加载请求获取图片的方法

2. 在data中配置图片路径

data() {
  return {
   formData: {
   avatar: require('@/assets/icon1524737568182.png'),
   motto: 'xxxxxxxxxx'
   },
   routers: this.$router.options.routes
  }
  }

3. 在需要的地方引入图片

<div class="avatar"><img :src="formData.avatar" alt=""></div>

二. 加载请求获取到的图片

1.配置文档build/webpack.base.conf.js

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  exclude: [resolve('src/icons')],
  options: {
   limit: 10000,
   name: utils.assetsPath('images/[name].[hash:7].[ext]')
  }
  },

vue src动态加载请求获取图片的方法

2.图片一类的静态文件,应该放在这个static文件夹下,这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径,就可以访问这些静态文件了。

3.请求数据

created() {
 const that = this
 this.request({
  url: '/sysInfoFront/list',
  method: 'get'
 }).then(function(res) {
  const resData = res.data
  if (resData.code === 100) {
  const avatear = resData.data.avater
  resData.data.avatar = avatear
  that.formData = resData.data
  }
 })
 },

请求的结果:

vue src动态加载请求获取图片的方法

4.在需要的地方引入图片

<div class="avatar"><img :src="formData.avatar" alt=""></div>

两种方式的最终图片显示效果

vue src动态加载请求获取图片的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
js arguments.callee的应用代码
May 07 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
node实现分片下载的示例代码
Oct 17 #Javascript
在小程序开发中使用npm的方法
Oct 17 #Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 #Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 #Javascript
element-ui的回调函数Events的用法详解
Oct 16 #Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 #Javascript
Postman的下载及安装教程详解
Oct 16 #Javascript
You might like
PHP中str_replace函数使用小结
2008/10/11 PHP
php5.3 废弃函数小结
2010/05/16 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
利用jQuery解析获取JSON数据
2017/04/08 jQuery
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
python获得图片base64编码示例
2014/01/16 Python
对Django中内置的User模型实例详解
2019/08/16 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
对python中return与yield的区别详解
2020/03/12 Python
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
日语翻译个人求职的自我评价
2013/10/14 职场文书
经济学博士求职自荐信范文
2013/11/23 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
煤矿安全承诺书
2014/05/22 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技