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学习笔记 获取jQuery对象
Sep 19 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
javascript cookie的简单应用
Feb 24 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
js编写简单的计时器功能
Jul 15 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
vue print.js打印支持Echarts图表操作
Nov 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
php 保留小数点
2009/04/21 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
js实现圆盘记速表
2015/08/03 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
Python GAE、Django导出Excel的方法
2008/11/24 Python
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
初步解析Python下的多进程编程
2015/04/28 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
python3爬虫怎样构建请求header
2018/12/23 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
自我鉴定书范文
2013/10/02 职场文书
工业设计专业推荐信
2013/10/29 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
研讨会通知
2015/04/27 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python