vue,uniapp封装图片地址拼接函数

影阴

已于 2024-01-11 15:16:59 修改

阅读量778

点赞数 7

文章标签： vue.js uni-app 前端

于 2023-12-26 15:39:36 首次发布

本文链接：https://blog.youkuaiyun.com/qq_47902937/article/details/135223503

版权

文章介绍了如何在uniapp项目中封装一个getImgUrl函数，用于处理图片地址的拼接，当图片地址没有根URL时，会自动使用设置在app.vue中的BASE_URL。使用时仅需在script部分修改图片引用即可，无需改动模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp中封装拼接图片地址函数方法

uniapp的拼接写在main.js中不用导出可以直接使用

// 图片地址的拼接
// 图片
Vue.prototype.getImgUrl=function(url){
	if(url && url.indexOf('http')==-1){
	//  getApp().globalData.BASE_URL  获取跟地址的方法 该方法是跟地址设置在app.vue中且 已经暴露出来 如下app.vue图片
		return getApp().globalData.BASE_URL + url  //没有根地址就使用域名 + url拼接
	}else{
		return url
	}
}

使用方法（）item.lecture.cover是图片的地址
在这里插入图片描述
app.vue图片不用修改原来的css和template（一般来说可以没有template）只需要修改script
app.vue的图片