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

news2024/12/27 1:33:26

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

main.js

页面上

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

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

最终的解决办法是

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

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

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

直接使用是

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1794211.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Waymo视角革新!MoST:编码视觉世界,刷新轨迹预测SOTA!

论文标题&#xff1a; MoST: Multi-modality Scene Tokenization for Motion Prediction 论文作者&#xff1a; Norman Mu, Jingwei Ji, Zhenpei Yang, Nate Harada, Haotian Tang, Kan Chen, Charles R. Qi, Runzhou Ge, Kratarth Goel, Zoey Yang, Scott Ettinger, Rami A…

RocketMQ可视化界面安装

RocketMQ可视化界面安装 **起因&#xff1a;**访问rocketmq-externals项目的git地址&#xff0c;下载了源码&#xff0c;在目录中并没有找到rocketmq-console文件夹。 git下面文档提示rocketMQ的仪表板转移到了新的项目中&#xff0c;点击仪表板到新项目地址&#xff1b; 下载…

金融科技重塑跨境支付:创新引领全球支付新纪元

一、引言 随着全球化的加速和科技的飞速发展,跨境支付作为国际贸易的“血脉”,正经历着前所未有的变革。金融科技以其强大的创新能力和技术支撑,正在重塑跨境支付领域的格局,推动全球支付行业向更加高效、安全、便捷的方向发展。本文将深入探讨金融科技如何引领跨境支付的创…

特征交叉系列:DeepCross(DCN-V2)理论和实践

DCN之前FM系列特征交叉思路总结 在之前的推荐算法特征交叉系列中&#xff0c;已经介绍了从FM&#xff0c;FFM&#xff0c;到PNN&#xff0c;DeepFM&#xff0c;NFM&#xff0c;AFM这一系列围绕特征交叉展开的算法&#xff0c;这些算法都是以FM为基石&#xff0c;在FM的基础上优…

kali扩容

通过wmware虚拟机–>设置–>添加40G容量的硬盘。 ──(root㉿kali)-[~/桌面] fdisk -lDisk /dev/sda: 40 GiB, 42949672960 bytes, 83886080 sectors …

Meta的开源力作:Lexical框架,富文本的未来

引言 Lexical 是一个由 Facebook&#xff08;现在称为 Meta&#xff09;开源的可扩展 JavaScript Web 文本编辑器框架。 这个框架特别强调了三个核心特性&#xff1a;可靠性、可访问性以及高性能。 旨在为开发者创造最优的开发体验。 以下是 Lexical 框架的几个关键特点和能…

STM32F103单片机工程移植到航顺单片机HK32F103注意事项

一、简介 作为国内MCU厂商中前三阵营之一的航顺芯片&#xff0c;建立了世界首创超低功耗7nA物联网、万物互联核心处理器浩瀚天际10X系列平台&#xff0c;接受代理商/设计企业/方案商定制低于自主研发十倍以上成本&#xff0c;接近零风险自主品牌产品&#xff0c;芯片设计完成只…

flask轻松入门,概念讲解

Hello World Flask 是轻量级web框架&#xff0c;仅保留了核心功能&#xff1a; 请求响应处理模板渲染URL路由 文章目录 Hello Worldflask命令模式python命令模式两种模式对比修改入口文件配置flask命令修改python命令修改 修改端口和地址flask命令修改python命令修改 修改 URL …

SQL Developer管理RESTful 服务

RESTful 服务依赖于ORDS&#xff08;Oracle REST Data Services&#xff09;&#xff0c;所以在进行本实验前&#xff0c;请先确认数据库服务器上的ORDS服务已启动&#xff1a; $ systemctl status ords ● ords.service - Oracle REST Data ServicesLoaded: loaded (/etc/sys…

动态规划7:LCR 166. 珠宝的最高价值

动态规划解题步骤&#xff1a; 1.确定状态表示&#xff1a;dp[i]是什么 2.确定状态转移方程&#xff1a;dp[i]等于什么 3.初始化&#xff1a;确保状态转移方程不越界 4.确定填表顺序&#xff1a;根据状态转移方程即可确定填表顺序 5.确定返回值 题目链接&#xff1a;LCR …

最新版wordpress网创资源美化以及更新自动同步插件

最新更新了美化右侧悬浮图标 底部分类板块&#xff0c;以及文章自动同步插件 1.支持分类替换 将主站同步过来的文章分类进行替换 2.支持本地化文章图片 &#xff08;使用储存桶可能会导致无法保存图片&#xff09; 3.支持自定义文章作者&#xff08;选择多个作者则同步到的…

Python round函数详解

大家好&#xff0c;在 Python 编程中&#xff0c;经常需要对数字进行舍入操作。无论是在金融领域的货币计算&#xff0c;还是科学计算中的数据处理&#xff0c;都可能需要使用到四舍五入功能。为了满足这一需求&#xff0c;Python 提供了一个内置函数 round()&#xff0c;它能够…

Java多线程-初阶1

博主主页: 码农派大星. 数据结构专栏:Java数据结构 数据库专栏:MySQL数据库 JavaEE专栏:JavaEE 关注博主带你了解更多数据结构知识 1. 认识线程&#xff08;Thread&#xff09; 1.线程是什么 ⼀个线程就是⼀个 "执⾏流". 每个线程之间都可以按照顺序执⾏⾃⼰的代…

白酒:茅台镇白酒的精致包装与品牌形象

茅台镇&#xff0c;这个位于中国贵州省的小镇&#xff0c;因其与众不同的自然环境和杰出的酿酒工艺而成为世界著名的白酒产区。作为茅台镇的品牌&#xff0c;云仓酒庄豪迈白酒不仅在品质和口感上追求卓着&#xff0c;更在包装和品牌形象上展现出精致与品味。 云仓酒庄豪迈白酒的…

【vue-admin-template】设置前后端访问地址

最近在使用vue-admin-template模板进行二次开发&#xff0c;GitHub地址&#xff1a; Vue-Admin-Template。 如果要在该项目中设置前后端的访问IP及端口&#xff0c;可以这样做&#xff1a; 前端&#xff1a;在vue.config.js中&#xff1a; 后端&#xff1a;在request.js中&…

Django学习三:views业务层中通过models对实体对象进行的增、删、改、查操作。

文章目录 前言一、Django ORM介绍二、项目快速搭建三、操作1、view.pya、增加操作b、删除操作c、修改操作d、查询操作 2、urls.py 前言 上接博文&#xff1a;Django学习二&#xff1a;配置mysql&#xff0c;创建model实例&#xff0c;自动创建数据库表&#xff0c;对mysql数据…

Day44 代码随想录打卡|二叉树篇---找树左下角的值

题目&#xff08;leecode T513&#xff09;&#xff1a; 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 方法&#xff1a;本题需要找二叉树左下角的值&#xff0c;因此该节点首先是在最后一行&#xff0…

java——顺序表

前言&#xff1a;顺序表是线性表的一种&#xff0c;它是较于数组更加灵活的一种储存方式。线性表通常是逻辑上是连续的一条直线&#xff0c;但在物理上不是连续的。java中已经实现好了一个顺序表&#xff0c;搭配泛型可以支持各种类型的使用&#xff0c;下面就来介绍该如何使用…

如何修复d3dcompiler43.dll丢失问题,这三种方法可轻松解决

在计算机使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中之一就是“计算机缺失d3dcompiler43.dll”。这个问题可能会影响到计算机的正常运行&#xff0c;让我们无法正常使用某些软件或者游戏。那么&#xff0c;究竟什么是d3dcompiler43.dll&#xff1f;为什…

Golang | Leetcode Golang题解之第128题最长连续序列

题目&#xff1a; 题解&#xff1a; func longestConsecutive(nums []int) int {numSet : map[int]bool{}for _, num : range nums {numSet[num] true}longestStreak : 0for num : range numSet {if !numSet[num-1] {currentNum : numcurrentStreak : 1for numSet[currentNum…