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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
jquery tools系列 expose 学习
Sep 06 Javascript
json 实例详细说明教程
Oct 31 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 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循环跳出的问题
2013/07/01 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
Python实现微信小程序支付功能
2019/07/25 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
VC++笔试题
2014/10/13 面试题
连锁经营管理专业大学生求职信
2013/10/30 职场文书
给客户的道歉信
2014/01/13 职场文书
明信片寄语大全
2014/04/08 职场文书
授权收款委托书范本
2014/10/10 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
学校捐书倡议书
2015/04/27 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
golang 实用库gotable的具体使用
2021/07/01 Golang
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS