【Uniapp】uniapp微信小程序定义图片地址全局变量

错误写法:

main.js

javascript 复制代码
Vue.prototype.$imgUrl = '图片地址'

这么写之后 就发现压根不起作用;获取到的是undefined

正确写法:

返回函数,后面可以拼上OSS图片完整路径

javascript 复制代码
Vue.prototype.$imgUrl = (url) => {
  return ("https://地址" + url);
};

页面使用:

template

javascript 复制代码
<image :src="$imgUrl('/list-icon.png')" />

js

javascript 复制代码
this.$imgUrl('/list-icon.png')

css定义

uni.scss

javascript 复制代码
$imgUrl: "https://图片地址";

style使用:

javascript 复制代码
background: url($imgUrl + "/modal.png") no-repeat;

感谢你的阅读,如对你有帮助请收藏+关注!

只分享干货实战精品从不啰嗦!!!

如某处不对请留言评论,欢迎指正~

博主可收徒、常玩QQ飞车,可一起来玩玩鸭~

相关推荐
乌托邦12 小时前
uni-mini-ci:让 uniapp 小程序构建后自动预览和上传
前端·vue.js·uni-app
敲代码的鱼13 小时前
NFC读卡能力 支持安卓/iOS/鸿蒙 UTS插件
android·ios·uni-app
客场消音器14 小时前
如何使用codex进行UI重构,让AI开发的前端页面不再千篇一律
前端·后端·微信小程序
西洼工作室17 小时前
UniApp云开发笔记
前端·笔记·uni-app
Martin -Tang18 小时前
uniapp 实现录音操作,长按录音,放开取消
前端·javascript·vue.js·uni-app·css3·录音
打瞌睡的朱尤18 小时前
微信小程序126~160
微信小程序·小程序
腾讯云云开发19 小时前
小程序成长计划正式接入Hy3 preview
微信小程序
bruce5411020 小时前
讲讲 RTMate (WebSocket as A Service)中的消息的发布订阅机制
后端·微信小程序
西洼工作室21 小时前
UniApp开发全攻略:从生命周期到路由传值
前端·javascript·uni-app
我是伪码农1 天前
小程序50-75
小程序