微信小程序采坑七：背景图不显示

最新推荐文章于 2025-02-21 13:14:49 发布
原创 最新推荐文章于 2025-02-21 13:14:49 发布 · 872 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#背景图不显示

本文介绍了当背景图仅在手机端不显示时的原因及解决方案。指出本地图片不被支持是主要原因，并提供了两种解决方法：一是将图片上传到服务器并使用服务器地址；二是将图片转换为Base64编码进行引用。

问题描述：

 背景图在手机不显示，开发工具可以

原因：

 背景图不支持本地图片

解决办法：

1.图片放到服务器,使用服务器地址

2.转成base64引用，可使用在线转换工具直接转换复制

 

微信小程序背景图片真机不显示问题
donghua201的博客
09-28 1468
微信提供了操作文件的方法，获取到FileSystemManager文件管理器，然后调用它的readFile()或者readFileSync()方法读取本地文件内容进行操作。
微信小程序：背景图不显示、下拉没有触发onPullDownRefresh
03-29
No.1 背景图不显示 微信小程序里面是允许用户自定义背景图的，但是限定了背景图的路径及地址，之前一直用相对路径来写，微信开发者工具中也显示出了背景图，误以为没有问题，但是预览的时候发现手机中不显示背景图，这就是今天介绍的第一个坑，背景图不允许为本地图片。 解决方法： 第一、用在线图片转base64码的方法，这种方法的优点在于图片不存储在本地或者服务器上，占用空间小修改方便，缺点是小图片处理效果更好，大图代码相当的长，长的都不想看他... 第二、将图片上传至服务器，引用图片地址就可以了，方便快捷，不过修改麻烦且占用服务器空间。   No.2 下拉没有触发onPullDownRefresh  
微信小程序背景图不显示问题
思渝崖
05-30 1373
微信小程序背景图不显示问题
微信小程序背景图片不显示
Wandering的博客
04-12 1万+
最近学着写了一个微信小程序，可是总是是加载不出背景图片。这里先描述一下问题。 用下面这种办法声明的背景图片在本机和手机上都无法显示。 .container { height: 100%; display: flex; flex-direction: column; align-content: center; box-sizing: borde...
微信小程序设置背景图片不显示问题解决方法
热门推荐
Ghjkku的博客
07-22 13万+
微信小程序设置背景图片不显示问题解决方法
微信小程序基于canvas实现纯色背景抠图功能
06-11
微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现...
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
10-16
本篇文章将详细介绍如何实现微信小程序自定义头部导航栏和导航栏背景图片，以及处理与`navigationStyle`相关的技术问题。 首先，微信小程序提供了`navigationStyle`属性，允许开发者禁用默认的导航栏并自定义样式。...
精选资源
微信小程序游戏类demo：翻牌小程序
03-15
这些都可以通过微信小程序的API实现，如wx.setStorageSync和wx.getStorageSync用于本地数据存储，wx.playBackgroundAudio管理背景音乐播放。 总结来说，“微信小程序游戏类demo：翻牌小程序”涉及到的技术主要包括...
【微信小程序源码】画布：时钟.zip
最新发布
08-23
微信小程序源码是为微信平台开发的小程序应用程序的源代码。它支持各种功能，从简单的交互式界面到复杂的业务逻辑，让开发者能够创建基于微信生态的移动应用程序。微信小程序提供了一套开发框架，包括前端和后端组件...
微信小程序背景图无法显示
Zbz00720的博客
08-31 1172
网上有很多解决方法，比如转 base64 ，网络图片地址等等，但我觉得都太麻烦了，这里直接给出我的解决方法。（ 还可以直接把 background 也一起放进变量里，不过那样写路径时就没有提示了 ）不知道有没有人跟我一样，刚接触微信小程序，在写代码的时候，背景图莫名奇妙不显示。由于 WXS是属于 视图层的 ，所以也不用担心会影响加载速度。
解决小程序引入背景图片不显示的四种方法
xiamoziqian的博客
12-19 7028
小程序在css样式文件里面直接 background-image引入本地背景图是不生效的 .header{ width:100%; height:420rpx; background-image: url("/static/image/bg.jpg"); background-size: 100%; background-color: red; } 三种解决办法：...
微信小程序设置本地图片为背景图片不显示以及清除button的默认背景，具体的原因和解决办法
时间飞逝的博客
10-09 4697
1、微信小程序设置本地图片为背景图片不显示 遇到的问题： 在开发小程序的时候，设置本地图片为背景图片的时候，发现编辑器可以显示出来，但是在真机上运行的时候却不能显示。 具体的原因： 经过查资料发现，background-image只能用网络url或者base64图片编码，本地图片只能用 image标签src属性才行。 当然 image标签src属性也可以使用网络url或者base64图片...
【微信小程序】微信小程序设置本地背景图片在真机无法显示的解决方案
九日的博客
07-22 4258
使用网络图片：将图片上传到服务器，然后在 CSS 中引用网络地址。使用 Base64 编码：将图片转换为 Base64 编码，然后在 CSS 中引用。使用标签代替：在 WXML 文件中使用标签来显示图片。
微信小程序中设置background背景图片不显示的问题
ByteGeek
03-29 1万+
最近在做我司的小程序开发，再给组件设置背景图片，引用的是本地图片，微信开发者工具中没有问题，可在真机中跑就不行了，代码如下: .img-background { background: url('../../beauty.png'); width: 200rpx; height: 160rpx; } 原谅我是小白啊（确实是小白，之前一直做安卓开发，不过对前端很有兴趣，嘿嘿！现在努力...
uniapp小程序不显示背景图片
weixin_43303415的博客
01-05 918
uniapp小程序背景图片不显示
微信小程序 uniapp 背景图片 background-image 显示不出图片 背景图片显示不出来 微信小程序背景图片真机调试显示不出 本地路径存放图片，微信小程序显示不出
qq_46283664的博客
02-21 965
具体是为什么还得等大家继续深究探讨，我也是刚刚遇到这个问题，不过刚刚通过测试解决了。不说了，项目经理又催了 (ಥ_ಥ)没那么麻烦，继续用background-image，继续用本地路径，不要使用内联样式，背景图片这些在。
微信小程序的背景图片在手机上不显示？
chiying6080的博客
11-30 889
问题描述： 在开发微信小程序的过程中发现在手机预览时背景图片不显示。 WXML <!--/* ***HotApp云笔记，基于HotApp小程序统计云后台 ***免费云后台申请地址 https://weixin.hotapp.cn/cloud ***API 文档地址：https://wei...
小程序引入背景图片不显示问题解决
dream12331的博客
11-30 1万+
小程序在css样式文件里面直接 background-image引入本地背景图是不生效的 .header{ width:100%; height:420rpx; background-image: url("/static/image/bg.jpg"); background-size: 100%; background-color: red; } 三种解...
微信小程序相册功能开发：本地图片上传与列表生成
微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。微信小程序的学习与开发正在吸引越来越多的开发者参与其中。在本知识点中，我们将重点解析微信小...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值