uniapp封装公共图片路径及使用方式

文章讲述了如何在Vue项目中main.js文件中封装一个getimgsrc函数,用于处理图片URL,确保在没有http域名时添加默认前缀,并在页面上通过<image>组件的src属性以aspectFit模式显示图片。
摘要由CSDN通过智能技术生成
1.main.js下封装
//给图片路径添加路径
Vue.prototype.getimgsrc = function(url) {
	let urlk = url;
	let str = RegExp('http');
	let newUrl;
	//通过三元运算符进行判断该图片是否含有http域名,没有就拼接上去https://www.zhaoyangjing.com
	str.test(urlk) ? newUrl = urlk : newUrl = 'https://www.baidu.com' + urlk;
	const urls = newUrl
	return urls
}
2.页面使用
<image :src="getimgSrc(item.banner)" mode="aspectFit">

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

泥木马

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值