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 prototype属性使用说明
May 13 Javascript
javascript event 事件解析
Jan 31 Javascript
Javascript变量函数浅析
Sep 02 Javascript
PHP守护进程实例
Mar 06 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
JS二分查找算法详解
Nov 01 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
JS监听组合按键思路及实现过程
Apr 17 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
COM in PHP (winows only)
2006/10/09 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
Prototype Function对象 学习
2009/07/12 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
angular2使用简单介绍
2016/03/01 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
Python代码的打包与发布详解
2014/07/30 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python下载网络小说实例代码
2018/02/03 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
大学学年自我鉴定
2013/10/28 职场文书
会计实习自我鉴定
2013/12/04 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
产品包装策划方案
2014/05/18 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书