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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
很酷的javascript loading效果代码
Jun 18 Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 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 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP count()函数讲解
2019/02/03 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
JS跨域问题详解
2014/11/25 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
Express的路由详解
2015/12/10 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
Python列表list排列组合操作示例
2018/12/18 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
Python脚本调试工具安装过程
2021/01/11 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
挂职思想汇报
2013/12/31 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript