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权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
JS实现公告上线滚动效果
Jan 10 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 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 读取文件的正确方法
2009/04/29 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python脚本实现下载合并SAE日志
2015/02/10 Python
初步解析Python下的多进程编程
2015/04/28 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Python如何给函数库增加日志功能
2020/08/04 Python
python实现计算器简易版
2020/12/17 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
中间件分为哪几类
2012/03/14 面试题
职称自我鉴定
2013/10/15 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
年会搞笑主持词
2014/03/27 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
北京故宫的导游词
2015/01/31 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书