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判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 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 更新数据库中断的解决方法
2009/06/05 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
用python处理MS Word的实例讲解
2018/05/08 Python
python简易远程控制单线程版
2018/06/20 Python
Python列表解析配合if else的方法
2018/06/23 Python
python制作图片缩略图
2019/04/30 Python
python Pillow图像处理方法汇总
2019/10/16 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
Python random模块的使用示例
2020/10/10 Python
python excel多行合并的方法
2020/12/09 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
农民工工资保障承诺书
2015/05/04 职场文书
表扬信范文
2015/05/04 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
新闻稿件写作范文
2015/07/18 职场文书
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android