解决 uniapp 开发微信小程序 不能使用本地图片作为背景图 问题
参考博文:uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的解决方法_javascript技巧_脚本之家
问题:uniapp 开发微信小程序,当使用本地图片作为 background-image 时,真机无法显示
解决:
方法一:
动态将本地图片转为base64
使用微信小程序自带转换方法wx.getFileSystemManager().readFileSync(img, 'base64')
// 本地图片转为base64urlToBase64: (folder, fileName, format = 'png') => {let img = `/static/${folder}/${fileName}.${format}`, base64Url = ''// #ifdef MP-WEIXINlet imgBase64 = wx.getFileSystemManager().readFileSync(img, 'base64')base64Url = `data:image/png;base64,${imgBase64}`// #endifreturn base64Url || img}
在vue文件中调用 urlToBase64 方法,这边默认图片都放在 static 文件夹下
方法二:
手动将图片转为base64
图片在线转换工具链接:
http://www.jsons.cn/img2base64/
https://tool.chinaz.com/tools/imgtobase
在静态资源文件夹下创建sass文件,如 base64-img-store.scss
将转换后的base64编码放到对应url里,样式变量名称可自行定义

在uni.scss文件中引入 base64-img-store.scss
@import '@/static/css/base64-img-store.scss';
vue文件<style lang="scss">中使用

相关文章:
解决 uniapp 开发微信小程序 不能使用本地图片作为背景图 问题
参考博文:uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的解决方法_javascript技巧_脚本之家 问题:uniapp 开发微信小程序,当使用本地图片作为 background-image 时,真机无法显示 解决: 方法一&am…...
常用中间件封装思路粗记
MQ 自定义注解 ,编写配置类在bean属性初始化SmartInitializingSingleton#afterSingletonsInstantiated后至处理器 去扫描有自定义注解的bean,去创建对应消费者的容器 并启动消费者容器类主要组件DefaultMQPushConsumer SmartInitializingSingleton#afte…...
探索SPI:深入理解原理、源码与应用场景
文章目录 一、初步认识1、概念2、工作原理3、作用场景 二、源码分析1、ServiceLoader结构2、相关字段3、核心方法 三、案例connector连接器小案例1、新建SPI项目2、创建扩展实现项目1-MongoDB3、创建扩展实现项目2-Oracle4、测试 Spring应用1、创建study工程2、创建forlan-test…...
Web3名词解释
Web3名词解释 以太坊 ERC20 Defi去中心化金融 Defi是Decentralized Finance的英文缩写。 简单理解点就是与传统的高度中心化金融体系相比,去中心化金融是通过区块链技术,比如基于区块链技术开发的手机钱包软件,通过智能合约代码以实现去除…...
Vatee万腾外汇市场新力量:vatee科技决策力
在当今数字化时代,Vatee万腾崭露头角,以其强大的科技决策力进军外汇市场,成为该领域的新力量。这一新动向将不仅塑造外汇市场的未来,也展现Vatee科技决策力在金融领域的引领作用。 Vatee万腾带着先进的科技决策力进入外汇市场&…...
【HarmonyOS开发】配置开发工具DevEco Studio
1、下载 注意: 1、安装过程中,一定要自定义安装位置,包比较大,包比较大,包比较大!!! 2、可以将该工具添加到右键中,否则,如果你的项目不是HarmonyOSÿ…...
探索亚马逊大语言模型:开启人工智能时代的语言创作新篇章
文章目录 前言一、大语言模型是什么?应用范围 二、Amazon Bedrock总结 前言 想必大家在ChatGPT的突然兴起,大家多多少少都会有各种各样的问题,比如:大语言模型和生成式AI有什么关系呢?大语言模型为什么这么火…...
zabbix-proxy分布式监控
Zabbix是一款开源的企业级网络监控软件,可以监测服务器、网络设备、应用程序等各种资源的状态和性能指标。在大型环境中,如果只有一个Zabbix Server来监控所有的节点,可能会遇到性能瓶颈和数据处理难题。 为了解决这个问题,Zabbi…...
springboot生成PDF,并且添加水印
/*** 导出调查问卷*/ApiLog("导出调查问卷")PostMapping("/print/{id}")ApiOperationSupport(order 23)ApiOperation(value "导出报告", notes "导出报告")public void print(PathVariable Long id, HttpServletResponse response…...
Tensorflow2.0:CNN、ResNet实现MNIST分类识别
以下仅是个人的学习笔记 ,内容可能是错误 CNN: import tensorflow as tf from tensorflow import keras from tensorflow.keras import layers# 导入数据 (x_train, y_train), (x_test, y_test) keras.datasets.mnist.load_data()# 数据预处理 x_tra…...
本地jar导入maven
一、通过dependency引入 1.1. jar包放置,建造lib目录 1.2. pom.xml文件 <dependency><groupId>zip4j</groupId><artifactId>zip4j</artifactId><version>1.3.2</version><!--system,类似provided&#x…...
数据结构与算法【堆】的Java实现
前言 之前已经说过堆的特点了,具体文章在数据结构与算法【队列】的Java实现-CSDN博客。因此直接实现堆的其他功能。 建堆 所谓建堆,就是将一个初始的堆变为大顶堆或是小顶堆。这里以大顶堆为例。展示如何建堆。 找到最后一个非叶子节点从后向前&…...
同创永益联合红帽打造一站式数字韧性解决方案
随着AI技术的快速兴起,IT技术已成为推动业务持续增长的重要驱动力,这要求企业不断尝试新事物,改变固有流程,加强IT技术与业务的合作,同时提升数字韧性能力,以实现业务目标。10月26日,红帽2023中…...
c++ call_once 使用详解
c call_once 使用详解 std::call_once 头文件 #include <mutex>。 函数原型: template<class Callable, class... Args> void call_once(std::once_flag& flag, Callable&& f, Args&&... args);flag:标志对象…...
【rosrun diagnostic_analysis】报错No module named rospkg | ubuntu 20.04
ubuntu20.04使用指令报错 现象 rosrun diagnostic_analysis export_csv.py my.bag -d ~/Desktop报错 Traceback (most recent call last): File "/opt/ros/noetic/lib/diagnostic_analysis/export_csv.py", line 40, in <module> import roslib; roslib.load_m…...
高防CDN有什么作用?
分布式拒绝服务攻击(DDoS攻击)是一种针对目标系统的恶意网络攻击行为,DDoS攻击经常会导致被攻击者的业务无法正常访问,也就是所谓的拒绝服务。 常见的DDoS攻击包括以下几类: 网络层攻击:比较典型的攻击类…...
盛元广通开放实训室管理系统2.0
开放实训室管理系统是一种基于网络和数据库的实训室信息管理系统,旨在提高实训室的管理水平,实现实训资源的优化配置和高效利用。该系统通常包括用户管理、设备管理、课程管理、考核管理等功能模块,能够实现实训室的预约、设备借用、课程安排…...
3D建模基础教程:编辑多边形功能命令快捷方式
一、打开3D软件并创建新模型 首先,打开你的3D建模软件,比如Blender、Maya或3ds Max。然后,创建一个新的3D模型。你可以使用基本几何体来创建模型,也可以导入现有的模型。 二、进入编辑多边形模式 在主工具栏中,找到并…...
SaleSmartly新增AI意图识别触发器!让客户享受更精准的自动化服务
AI意图识别技术是对话式AI中很重要的组成部分,通俗点来说就是一种可以识别用户在对话中表达的意图的技术。通过对大量数据的分析和学习,AI可以理解用户想要获得的信息,并根据这些信息来采取相应的行动或提供相应的响应。而在对话式AI中&#…...
计算机毕业设计选题推荐-个人博客微信小程序/安卓APP-项目实战
✨作者主页:IT毕设梦工厂✨ 个人简介:曾从事计算机专业培训教学,擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上,你可以使用apt包管理器来安装NFS服务器。打开终端并运行: sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享,例如/shared: sudo mkdir /shared sud…...
盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来
一、破局:PCB行业的时代之问 在数字经济蓬勃发展的浪潮中,PCB(印制电路板)作为 “电子产品之母”,其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透,PCB行业面临着前所未有的挑战与机遇。产品迭代…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索(基于物理空间 广播范围)2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
