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 相关文章推荐
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
详解Typescript里的This的使用方法
Jan 08 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 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
php字符集转换
2017/01/23 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
javascript第一课
2007/02/27 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
大学生求职信
2014/06/17 职场文书
团日活动总结报告
2014/06/25 职场文书
迎国庆演讲稿
2014/09/15 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
Python pandas求方差和标准差的方法实例
2021/08/04 Python