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 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
JsDom 编程小结
Aug 09 Javascript
javascript基本语法
May 31 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
vue之数据交互实例代码
Jun 16 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
JS如何在不同平台实现多语言方式
Jul 16 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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中的内存管理问题
2011/08/31 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
javascript Excel操作知识点
2009/04/24 Javascript
javascript 函数调用规则
2009/08/26 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
Vue的Options用法说明
2020/08/14 Javascript
python 多线程应用介绍
2012/12/19 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
python文本数据相似度的度量
2018/03/12 Python
python获取url的返回信息方法
2018/12/17 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
露营世界:Camping World
2017/02/02 全球购物
职业生涯规划书的格式
2013/12/29 职场文书
打架检讨书100字
2014/01/19 职场文书
简单租房协议书
2014/04/09 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
个人四风对照检查材料
2014/09/26 职场文书
自我评价优缺点范文
2015/03/11 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
户外亲子活动总结
2015/05/08 职场文书
高一军训口号
2015/12/25 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Django路由层如何获取正确的url
2021/07/15 Python