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 相关文章推荐
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
JS前端笔试题分析
Dec 19 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
Require.js的基本用法详解
Jul 03 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
jQuery实现日历效果
Sep 11 jQuery
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 5.3.0 安装分析心得
2009/08/07 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
laravel自定义分页效果
2017/07/23 PHP
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
python生成ppt的方法
2018/06/07 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python进程和线程用法知识点总结
2019/05/28 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Django 自定义分页器的实现代码
2019/11/24 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
英语专业毕业生自荐信范文
2013/12/31 职场文书
人力资源职位说明书
2014/07/29 职场文书
个人委托书怎么写
2014/09/17 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
golang为什么要统一错误处理
2022/04/03 Golang
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL