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 相关文章推荐
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
台湾生鲜宅配:大口市集
2017/10/14 全球购物
运动会解说词100字
2014/01/31 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
商场父亲节活动方案
2014/08/27 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
公司开业致辞
2015/07/29 职场文书
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python