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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
JavaScript门面模式详解
Oct 19 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 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
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
js日历功能对象
2012/01/12 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Python使用xpath实现图片爬取
2020/09/16 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
一道SQL面试题
2012/12/31 面试题
2014年国庆节寄语
2014/09/19 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python