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 相关文章推荐
javascript高亮效果的二种实现方法
Sep 14 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
Vue.js快速入门教程
Sep 07 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
JS轮播图的实现方法2
Aug 25 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
php设计模式  Command(命令模式)
2011/06/17 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
[00:10]神之谴戒
2019/03/06 DOTA
Python工程师面试题 与Python Web相关
2016/01/14 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
使用python去除图片白色像素的实例
2019/12/12 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
电大物流学生的自我评价
2013/10/25 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
《静夜思》教学反思
2016/02/17 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书