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 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
js如何取消事件冒泡
Sep 23 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
浅析Ajax语法
Dec 05 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
了解javascript中的Dom操作
May 27 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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
基于mysql的bbs设计(三)
2006/10/09 PHP
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
php命名空间学习详解
2014/02/27 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
JS中操作JSON总结
2020/12/06 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python类属性与实例属性用法分析
2015/05/09 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Python跳出多重循环的方法示例
2019/07/03 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
wxPython多个窗口的基本结构
2019/11/19 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
后备干部考察材料
2014/02/12 职场文书
学历公证委托书
2014/04/09 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
小学安全汇报材料
2014/08/14 职场文书
集体生日活动方案
2014/08/18 职场文书
vue组件vue-esign实现电子签名
2022/04/21 Vue.js