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 解决“options为空或不是对象”
Dec 22 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
js单例模式的两种方案
Oct 22 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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中uploaded_files函数使用方法详解
2011/03/09 PHP
php适配器模式介绍
2012/08/14 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
php实现微信扫码支付
2017/03/26 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
ionic3 懒加载
2017/08/16 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
室内设计专业个人的自我评价
2013/10/19 职场文书
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
安全教育心得体会
2013/12/29 职场文书
管理专员自荐信
2014/01/26 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript