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 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 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修改文件上传限制方法汇总
2015/04/07 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
js资料prototype 属性
2007/03/13 Javascript
如何用js控制css中的float的代码
2007/08/16 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
Python列表(list)常用操作方法小结
2015/02/02 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
学python需要去培训机构吗
2020/07/01 Python
python利用faker库批量生成测试数据
2020/10/15 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
孝老爱亲模范事迹
2014/01/24 职场文书
医院院务公开实施方案
2014/05/03 职场文书
邀请函格式范文
2015/02/02 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android
python高温预警数据获取实例
2022/07/23 Python