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 相关文章推荐
Maps Javascript
Jan 22 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 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 UTF8 文件的签名问题
2009/10/30 PHP
深入PHP异步执行的详解
2013/06/03 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
js实现div色块碰撞
2020/01/16 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
公司新员工的演讲稿注意事项
2014/01/01 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
亲子活动总结
2014/04/26 职场文书
温馨提示标语
2014/06/26 职场文书
公司委托书怎么写
2014/08/02 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
初中数学教学随笔
2015/08/15 职场文书
Python中requests库的用法详解
2022/06/05 Python