Vue 中对图片地址进行拼接的方法

更新时间：2018年09月03日 10:28:05 作者：爱吃排骨

今天小编就为大家分享一篇Vue 中对图片地址进行拼接的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

拿到一组数据，其中的img地址是这样的

我们想要将它转化为正常的图片地址，需要使用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中watch监听属性新旧值相同的问题解决方案
这篇文章主要给大家分享了Vue中watch监听属性新旧值相同问题解决方案,如果有遇到相同问题的朋友,可以参考阅读本文
2023-08-08
Ant Design的Table组件去除
这篇文章主要介绍了Ant Design的Table组件去除“取消排序”选项操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
详解Vue3的虚拟DOM是如何生成的
这篇文章给大家详细介绍了 Vue3 的虚拟DOM生成规则,文章通过代码示例和图片介绍的非常详细,具有一定的参考价值,对我们的学习或工作有一定的帮助,需要的朋友可以参考下
2023-09-09
关于vue2强制刷新,解决页面不会重新渲染的问题
今天小编就为大家分享一篇关于vue2强制刷新,解决页面不会重新渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
Vue中实现权限控制的方法示例
这篇文章主要介绍了Vue中实现权限控制的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
vue cli使用绝对路径引用图片问题的解决
这篇文章主要给大家介绍了关于vue cli使用绝对路径引用图片问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧。
2017-12-12
vue3如何获取绑定页面dom元素
这篇文章主要介绍了vue3如何获取绑定页面dom元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue3接口数据赋值对象,渲染报错问题及解决
这篇文章主要介绍了vue3接口数据赋值对象,渲染报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue3+ts中ref与reactive指定类型实现示例
这篇文章主要为大家介绍了vue3+ts中ref及reactive如何指定类型的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
详解vue3+electron如何做到本地化
要在Vue 3和Electron中实现本地化,可以使用类似于在Vue项目中进行本地化的方式,本文为大家介绍了一种常见的做法,希望对大家有所帮助
2024-03-03

Vue 中对图片地址进行拼接的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具