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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
js实现拖动缓动效果
Jan 13 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+Html+缓存
2006/11/25 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
javascript表单验证大全
2015/08/12 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python实现定时任务
2017/02/08 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
策划助理岗位职责
2013/11/18 职场文书
培训自我鉴定
2014/01/31 职场文书
英语老师推荐信
2014/02/26 职场文书
作文评语集锦大全
2014/04/23 职场文书
车辆管理制度范本
2015/08/05 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
mysql sock文件存储了什么信息
2022/07/15 MySQL