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

相关推荐
hudie76511 小时前
LikeShop 二开最常改的 5 个文件(附改前改后对比)
前端·uni-app·php·个人开发
CRMEB系统商城12 小时前
家电零售的供应商协同与物流提效
java·开发语言·人工智能·小程序·1024程序员节
CRMEB系统商城12 小时前
Redis + 消息队列 + 连接池:CRMEB PRO 性能优化的三驾马车
大数据·数据库·人工智能·小程序·php·1024程序员节
CRMEB系统商城14 小时前
服装连锁的导购分销与企微私域
java·大数据·开发语言·人工智能·小程序·php·1024程序员节
梅雅达编程笔记15 小时前
Day 17 | uni-app 小程序:前端从零搭建
微信小程序·typescript·uni-app·vue3·pinia·前端开发·全栈
一渊之隔1 天前
uniapp BLE 开发踩坑:小米手机数据接收截断问题排查全记录
智能手机·uni-app
阿俊-全栈开发1 天前
LikeShop 单商户标准版 UniApp 端二开:页面组件复用与自定义主题适配
uni-app·likeshop开源商城·likeshop单商户标准版·多商户源码
zhiboshequ1 天前
Ai音视频对话在微信小程序端的技术实现方案
人工智能·微信小程序·live-pusher·live-player·音视频对话
小蒜学长1 天前
基于过程性评价的ai助学平台(代码+数据库+LW)
java·spring boot·后端·微信小程序·过程性评价
半生过往2 天前
uni-app多端项目工作笔记
笔记·uni-app