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 相关文章推荐
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
ant design实现圈选功能
Dec 17 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 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
PHP Stream_*系列函数
2010/08/01 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
JavaScript 中的 this 工作原理
2018/06/20 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
Python异常学习笔记
2015/02/03 Python
理解Python中函数的参数
2015/04/27 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
100%羊绒:NakedCashmere
2020/08/26 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
四群教育工作实施方案
2014/03/26 职场文书
建筑安全标语
2014/06/07 职场文书
大学军训的体会
2014/11/08 职场文书
总账会计岗位职责
2015/04/02 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android