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 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
Javascript 继承实现例子
Aug 12 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
javascript中递归的两种写法
Jan 17 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
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
十天学会php之第十天
2006/10/09 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
调整PHP的性能
2013/10/30 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
python list语法学习(带例子)
2013/11/01 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python和go语言的区别是什么
2020/07/20 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
口头翻译求职人自荐信
2013/12/07 职场文书
亲子活动总结
2014/04/26 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
营销计划书
2015/01/17 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书