Vue 中对图片地址进行拼接的方法


Posted in Javascript onSeptember 03, 2018

拿到一组数据,其中的img地址是这样的

Vue 中对图片地址进行拼接的方法

我们想要将它转化为正常的图片地址,需要使用for循环来将图片拼接起来

getSingList(){
  getSingerList().then((res) =>{
   if (res.code==ERR_ok){
   this.singers=res.data.list
   console.log(this.singers)
   for(var i=0;i<this.singers.length;i++){
    this.singers[i].Fsinger_mid='//y.gtimg.cn/music/photo_new/T001R300x300M000'+this.singers[i].Fsinger_mid+'.jpg?max_age=2592000'
   }
   }
  })
  }
 },

这样我们就可以正确输出 我们想要的img url地址了

<ul class="singerPosti">
  <li v-for="item in sortList" class="singerConten">
  <div class="avatar">
  <img :src="item.Fsinger_mid" ></img>
  </div>
  <div class="list">
   <span>{{item.Fsinger_name}}</span>
  </div>
 
  </li>
 </ul>

Vue 中对图片地址进行拼接的方法

以上这篇Vue 中对图片地址进行拼接的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的12招常用技巧分享
Aug 08 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
微信小程序如何获取openid及用户信息
Jan 26 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
VUE预渲染及遇到的坑
Sep 03 #Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 #Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 #Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 #Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 #Javascript
webpack4 处理CSS的方法示例
Sep 03 #Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 #Javascript
You might like
星际中的相关伤害
2020/03/04 星际争霸
3.从实例开始
2006/10/09 PHP
php仿ZOL分页类代码
2008/10/02 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
Mac下安装vue
2018/04/11 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
Python实现把xml或xsl转换为html格式
2015/04/08 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
python实现指定ip端口扫描方式
2019/12/17 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
2014年教师节寄语
2014/08/11 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
小学生手册家长意见
2015/06/03 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书