uniapp小程序src引用服务器图片时全局变量与图片路径拼接

理论上,应该在main.js中定义一个全局变量,然后在页面的<image>标签上的是src直接使用即可

main.js

页面上

看上去挺靠谱的,实际上小程序后台会报一个错

很明显这种方式小程序是不认的,这就头疼了,还想过另外一个方法就是想vue一样定义全局的store参数进行设置,在页面的js中打印也是一切正常的,但是就是引入到如图上的图片的src就是不行

最终的解决办法是

依旧在main.js中定义一个全局的变量,但是这个全局的变量并不是一个字符串这么简单,而是一个方法,并且把图片地址return出去

页面引用就比较简单了,直接调用即可

除了定义js的全局变量,还有定义css的全局变量,uniapp使用的是scss这个css的预处理语法,可以直接在nui.scss文件中定义

直接使用是

相关推荐
qq_364371721 小时前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森2 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
new出一个对象5 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
new出一个对象5 小时前
uniapp接入高德地图
uni-app
dccose7 小时前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
y先森7 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy7 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189117 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css