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.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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中的session安全吗?
2016/01/22 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
javascript 写类方式之十
2009/07/05 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
Python自动重试HTTP连接装饰器
2015/04/28 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
如何教少儿学习Python编程
2020/07/10 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
职业技术学校毕业生推荐信
2013/12/03 职场文书
教师岗位职责范本
2013/12/29 职场文书
继电保护工岗位职责
2014/01/05 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
教师产假请假条
2014/04/10 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
基层党组织整改方案
2014/10/25 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书