解决 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">中使用

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

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

相关文章

计算机毕业设计选题推荐-个人博客微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

HTML5-原生History

更多内容&#xff0c;访问: history hash 单页面应用和多页面应用 React-Router源码分析-History库 History库源码分析-Action 动作类型 History库源码分析-createLocation History库源码分析-createPath History库源码分析-parsePath history 浏览器历史记录对象 属性: le…

来聊聊阿里1688 /拼多多API接口接入| 让需求回到产品端

昨儿办公室讨论起了1688。 对&#xff0c;就是阿里搞批发的那个网站。 在上面&#xff0c;你可以买到各种各样价格低廉的产品&#xff0c;比如&#xff0c;办公用具、女孩子的皮筋、小孩子的玩具等等。 在小批量上&#xff0c;它和拼多多定价类似&#xff0c;但二者的赛道却不同…

PHP 中传值与传引用的区别,什么时候传值什么时候传引用?

传值&#xff1a;当使用传值的方式时&#xff0c;函数或方法会创建原始变量的一个副本&#xff0c;并将该副本传递给函数或方法。在函数或方法内部&#xff0c;对副本的任何修改都不会影响到原始变量。当函数或方法执行完毕后&#xff0c;副本被销毁&#xff0c;不再使用。 传引…

Unity--互动组件(Toggle Group)||Unity--互动组件(Slider)

Toggle Group 属于同一组的切换开关受到限制&#xff0c;因此一次只能打开其中一个开关&#xff0c;按下其中一个开关时&#xff0c;其他的开关将会自动关闭&#xff1b; Allow Switch Off&#xff1a;&#xff08;允许关闭&#xff09; 如果禁用此设置&#xff0c;则按下当前…

开发《星球大战》小游戏的意义

开发《星球大战》小游戏的意义有以下几点&#xff1a; 学习和掌握游戏开发的基本技能&#xff1a;通过开发《星球大战》小游戏&#xff0c;可以学习和掌握游戏开发的基本技能&#xff0c;包括游戏策划、游戏设计、游戏编程和游戏测试等方面的技能。加深对游戏行业的了解&…

大数据HCIE成神之路之数学(2)——线性代数

线性代数 1.1 线性代数内容介绍1.1.1 线性代数介绍1.1.2 代码实现介绍 1.2 线性代数实现1.2.1 reshape运算1.2.2 转置实现1.2.3 矩阵乘法实现1.2.4 矩阵对应运算1.2.5 逆矩阵实现1.2.6 特征值与特征向量1.2.7 求行列式1.2.8 奇异值分解实现1.2.9 线性方程组求解 1.1 线性代数内…

GO 抽象工厂模式设计

既然工厂模式每个产品都需要实现对应的工厂类去生成相关实例&#xff0c;提取产品的共性&#xff0c;提高代码的内聚性&#xff0c; 就是抽象工厂模式要干的。在抽象工厂中&#xff0c;依然是不同产品对应不同的工厂类&#xff0c;但可以尽可能将具有相同共性的产品类别合在一起…

什么是虚拟DOM(Virtual DOM),说说工作原理

虚拟DOM&#xff08;Virtual DOM&#xff09;是一种将页面的状态抽象为JavaScript对象表示的概念&#xff0c;用于提高Web应用程序的性能和渲染效率。 虚拟DOM的工作原理如下&#xff1a; 1&#xff1a; 初始渲染&#xff1a;首先&#xff0c;通过JavaScript对象&#xff08;…

Revive开发商加入VR开源标准OpenXR

导读作为一款能让HTC Vive用户玩到Oculus平台游戏的软件&#xff0c;它的开发商CrossVR今日宣布即将加盟为VR和AR应用程序开源组织&#xff0c;即OpenXR。 由Khronos Group引领的OpenXR旨在创建一个标准化且免版税的应用程序编程接口&#xff08;API&#xff09;&#xff0c;该…

概念解析 | 光电神经网络:optoelectronic neural network

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:光电神经网络。 概念解析 | 光电神经网络的原理、挑战与未来 1. 背景介绍 在过去的十年中,深度学习和神经网络在许多领域取得了显著的成就,如图像识别、自然语言处理、医疗…

c++ call_once 使用详解

c call_once 使用详解 std::call_once 头文件 #include <mutex>。 函数原型&#xff1a; template<class Callable, class... Args> void call_once(std::once_flag& flag, Callable&& f, Args&&... args);flag&#xff1a;标志对象&#xf…

【算法专题】双指针

双指针 双指针1. 移动零2. 复写零3. 快乐数4. 盛水最多的容器5. 有效三角形的个数6. 和为s的两个数字7. 三数之和8. 四数之和 双指针 常见的双指针有两种形式&#xff0c;⼀种是对撞指针&#xff0c;⼀种是左右指针。 对撞指针&#xff1a;⼀般用于顺序结构中&#xff0c;也称…

【深度学习实验】网络优化与正则化(七):超参数优化方法——网格搜索、随机搜索、贝叶斯优化、动态资源分配、神经架构搜索

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、优化算法0. 导入必要的库1. 随机梯度下降SGD算法a. PyTorch中的SGD优化器b. 使用SGD优化器的前馈神经网络 2.随机梯度下降的改进方法a. 学习率调整b. 梯度估计修正 3. 梯度估计修正&#xff1a;动量法Momen…

【React】React 基础

1. 搭建环境 npx create-react-app react-basic-demo2. 基本使用 JSX 中使用 {} 识别 JavaScript 中的表达式&#xff0c;比如变量、函数调用、方法调用等。 if、switch、变量声明等属于语句&#xff0c;不是表达式。 列表渲染使用 map 。 事件绑定用&#xff1b;on 事件名称…

CentOS安装nodejs

查看可安装的版本 dnf module list nodejs选择需要版本安装 dnf module install nodejs:<stream>查看版本

67基于matlab图像处理,包括颜色和亮度调整、翻转功能、空间滤波和去噪、频域滤波和去噪、噪声添加,形态学操作、边缘检测及示波器集成的GUI图像处理。

基于matlab图像处理&#xff0c;包括颜色和亮度调整、翻转功能、空间滤波和去噪、频域滤波和去噪、噪声添加&#xff0c;形态学操作、边缘检测及示波器集成的GUI图像处理。数据可更换自己的&#xff0c;程序已调通&#xff0c;可直接运行。 67 matlab图像处理图像降噪 (xiaohon…

DPC15 国产带有 SPI 接口的独立 CAN 控制器兼容替代MCP2551

DPC15是一款独立控制器局域网络&#xff08;Controller Area Network&#xff0c;CAN&#xff09;协议控制器&#xff0c;完全支持CAN V2.0B技术规范。该器件能发送和接收标准和扩展数据帧以及远程帧。 DPC15自带的两个验收屏蔽寄存器和六个验收滤波寄存器可以过滤掉不想要的报…

vue安装three.js并创建第一个入门场景

vue安装three.js&#xff0c;并创建第一个入门场景 安装three.js npm install --save three引入three.js import * as THREE from threethree.js结构 three.js坐标 创建一个场景 scene场景&#xff0c;camera相机&#xff0c;renderer渲染器 创建一个场景 this.scene new T…

C#入门(1):程序结构、数据类型

一、C#程序结构 第一个C#程序 using System;namespace base_01 {class Program{#region 代码折叠块static void Main(string[] args){//控制台输出Console.WriteLine("Hello World!");Console.Write("C#是微软的编程语言"); //不换行输出//Console.Rea…