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中的Array对象使用说明
Jan 17 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 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 手机归属地查询 api
2010/02/08 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
php 中的closure用法详解
2017/06/12 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
门卫岗位职责
2013/11/15 职场文书
大学学习生活感言
2014/01/18 职场文书
霸王洗发水广告词
2014/03/14 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
酒会邀请函
2015/01/31 职场文书