微信小程序背景图片background无法在手机端显示问题解决方案
之前做过一个小程序项目,页面中有背景图片,使用web开发工具调试时候背景图片能正常显示,使用真机调试及发布线上版本的时候图片不显示,刚开始以为是图片显示路径问题,后面问啦度娘后才发现微信小程序不支持背景图片直接使用本地图片:
小程序page 代码如下:
这种写法能在web开发工具端调试时候正常显示背景图片,手机端不能正常显示
解决方法:
第一种:
使用服务器图片地址显示
第二种:
将图片转换成base64位 ,可以使用在线转换工具
两种方法比较:推荐使用第一种,因为第二种转换后如果图片太大,页面占得行数太多啦,影响代码的整洁效果
第一次做小程序采坑不少,后面和大家多分享点自己踩的坑.
微信小程序背景图片background无法在手机端显示问题解决方案相关推荐
- 微信小程序背景图片设置和图片自适应宽高
微信小程序背景图片设置和图片自适应宽高 我们在开发过程中经常需要对一些元素设置图片为背景图片. 网络图片: .ServiceCenter{width: 100vw;height: 40vw;margi ...
- 微信小程序背景图片全屏显示
微信小程序背景图片全屏显示 很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
- 微信小程序image图片预览时不显示(后缀问题!)
微信小程序image图片预览时不显示(后缀问题!) ".PNG"是不行滴!!! ".png"才可以!!! 刚刚用了两张图片是截下来的,后缀是".PNG ...
- 微信小程序背景图片不显示
最近学着写了一个微信小程序,可是总是是加载不出背景图片.这里先描述一下问题. 用下面这种办法声明的背景图片在本机和手机上都无法显示. .container { height: 100%; displa ...
- 关于微信小程序背景图片设置
微信小程序在 .wxss文件中不允许设置background-image :url('/img/bg.png');解决方法有如下两种 一:在 .wxss文件中设置背景图片时使用base64 网址:ht ...
- 微信小程序背景图片完全覆盖显示
微信小程序中,背景图片全屏 在微信小程序中需要设置背景图片全屏,这里用到css的知识我们可以: page { overflow:hidden; position:fixed; background-i ...
- 微信小程序 — 背景图片实现。
如图微信小程序背景色.上面放文字如何实现此效果.背景色设置css样式是position: relative; 文字设置css样式position: absolute; 布局wxml: <view ...
- 微信小程序 背景图片base64_微信小程序背景图片显示不出来
开发小程序的时候,设置页面的背景,用到css代码:.page__bd{ width: 100%; height: 220px; background: url('../../assets/img/im ...
- 微信小程序背景图片真机不显示问题
问题描述 : 开发者工具上<view style="background-image: url(图片路径);"></view>可以正常显示 但是真机预览,不 ...
最新文章
- mysql gfs2_Mysql_HA+IP_SAN+Clvmd+GFS2
- 娓娓道来!那些BERT模型压缩方法
- 20年资深Oracle数据库专家:国内应用级DBA的缺失
- c语言ascw,Asc/AscB/AscW和Chr/ChrB/ChrW函数之间的区别
- C语言杂谈:指针与数组 (上) (转)
- Vue轻松入门,一起学起来!
- Pandas处理数据太慢,来试试Polars吧!
- MybatisPlus入门Lombok的使用
- 中控ecs700 mysql_浙大中控ECS700工程指导手册.pdf
- Top命令找出CPU占用较高的Java线程信息
- 值得推荐的WEB版报表工具-报表设计器
- Linux的原子操作与同步机制
- jquery ajax 删除确认,jquery 漂亮的删除确认和提交无刷新删除示例
- 基于.NET平台的分层架构实战(八)——数据访问层的第二种实现:SQLServer+存储过程...
- flutter加载本地图片
- kk常用ramda函数总结
- 实验六 —— 火焰传感器
- 外贸公司用邮件开发客户需要注意些什么?
- 提升网站关键词排名的技巧
- vue实现纯前端导入与解析excel表格文件,导出Excel
热门文章
- 监控告警 Metrics - Prometheus
- Python爬虫学习笔记:概念、知识和简单应用
- 腾讯-腾讯云citybase产品白皮书
- 力扣(LeetCode)——编译、提交和注释快捷键
- TM1637驱动数码管
- py程序可以运行,但打包出的exe运行提示错误:加载“cv2”二进制扩展时检测到递归。请检查OpenCV安装。
- oem是代工还是贴牌_OEM贴牌和ODM贴牌的区别
- 合作:对应fork来的项目进行修改操作
- Python3.9的69个内置函数(内建函数)介绍,并附简单明了的示例代码
- Win10安装程序修复计算机,如何在Windows 10上使用安装介质引导或修复