【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飞车,可一起来玩玩鸭~

相关推荐
大米饭消灭者1 天前
Taro是怎么实现一码多端的【底层原理】
微信小程序·taro
HashTang1 天前
【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程
JunjunZ1 天前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
郑州光合科技余经理2 天前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
TT_Close2 天前
“啪啪啪”三下键盘,极速拉起你的 uni-app 项目!
vue.js·uni-app·前端工程化
FliPPeDround2 天前
Vitest Environment UniApp:让 uni-app E2E 测试变得前所未有的简单
微信小程序·e2e·前端工程化
FliPPeDround2 天前
微信小程序自动化的 AI 新时代:wechat-devtools-mcp 智能方案
微信小程序·ai编程·mcp
特立独行的猫a2 天前
uni-app x跨平台开发实战:开发鸿蒙HarmonyOS影视票房榜组件完整实现过程
华为·uni-app·harmonyos·轮播图·uniapp-x
吴声子夜歌2 天前
小程序——布局示例
小程序
码云数智-大飞2 天前
如何创建自己的小程序,码云数智与有赞平台对比
微信小程序