在pc端调试的时候已经可以看到出现背景图片了，但是在真机调试的时候却发现没有背景图片，那么原因是什么呢？真机调试和vconsole也看不出什么鸟，其实这是小程序的一个bug。另一种说法是：background-image 只能用网络url或者base64 . 本地图片要用image标签才行。

解决办法：

  • 解决方法一：在使用背景图片的时候用网络图片，就是用外链的形式，比如你将这张图片放到你的服务器，如：https://xxxx/xxx.jpg；

  • 解决方法二：将背景图片使用编码base64进行转换，可以在这个网址进行http://tool.css-js.com/base64.html、http://imgbase64.duoshitong.com/ 转换，如：background-image: url("转换后得到的编码文本")，如果多次使用的话可以将该值设置为全局变量，再在js文件进行引用即可；

  • 解决方法三：使用image组件而去掉背景图片；

参考文章：

http://www.yiyongtong.com/archives/view-7-1.html

https://segmentfault.com/q/1010000010488479

小程序背景图片bug的更多相关文章

  1. 微信小程序--背景图片手机无法预览

    目前小程序好像没有支持手机预览背景本地图片,所以将本地图片改为网络图片链接就可以了 background: url("https://..../img/no.png") no-re ...

  2. 微信小程序实现图片是上传、预览功能

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...

  3. 微信小程序裁剪图片成圆形

    代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在gith ...

  4. 「小程序JAVA实战」小程序头像图片上传（中）（44）

    转自:https://idig8.com/2018/09/09/xiaochengxujavashizhanxiaochengxutouxiangtupianshangchuan43/ 用户可以上传了 ...

  5. 小程序实现图片上传，预览以及图片base64位处理

    最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...

  6. 微信小程序 image图片组件实现宽度固定 高度自适应

    给img的mode设置值 注1:image组件默认宽度300px.高度225px 注2:image组件中二维码/小程序码图片不支持长按识别.仅在wx.previewImage中支持长按识别. mode ...

  7. 小程序输入框闪烁BUG解决方案

    前言 本人所说的小程序,都是基于mpvue框架而上的,因此BUG可能是原生小程序的,也有可能是mpvue的. 问题描述 在小程序input组件中,如果使用v-model进行双向绑定,在输入时会出现光标 ...

  8. 微信小程序实现图片双滑缩放大小

    在做小程序开发的过程中,后端传来一张图片地图,需要实现双手指滑动,使图片缩放,最终得出了一下代码: js : Page({ data: { touch: { distance: , scale: , ...

  9. 微信小程序天坑--图片汉字命名

    图片用汉字命名的,在开发者工具中是显示的,但是,在真机的微信中,是不会显示的. 大写的尴尬,微信小程序开发者工具对于做微信的UI来说,就是一个天坑,在电脑上漂漂亮亮的,到手机上各种意想不到的情况.

随机推荐

  1. windows 下 nginx 配置文件路径

    nginx在windowns下路径 http{ #虚拟主机1 server{ listen 80; #监听端口,基于IP配置的时候变更此处,比如192.168.1.100:8080; server_n ...

  2. Jquery操作ul的一些操作笔记

    1.html标记 <ul id="attachText"> <li data-text="111"><a href="# ...

  3. 数据库 'xxxx' 的事务日志已满。若要查明无法重用日志中的空间的原因

    一.出现的背景: 在SQL server中执行SQL语句出现如下图: 二.出现的原因: 我到数据库的服务器看了一下硬盘空间发现此数据库所在的D盘空间几乎已经用尽.如图: 三.解决方法: 第一种方法:直 ...

  4. Java学习笔记之——单例模式

      (1)懒汉式:对象在方法中,第一次调用时创建对象,线程不安全的 public class Singleton { //外部不可以创建对象,就要在内部创建一个对象,还能够在外部获取 private ...

  5. 【转】Mybatis源码解读-设计模式总结

    原文:http://www.crazyant.net/2022.html?jqbmtw=b90da1&gsjulo=kpzaa1 虽然我们都知道有26个设计模式,但是大多停留在概念层面,真实开 ...

  6. dubbo+zookeeper+springBoot框架整合与dubbo泛型调用演示

    dubbo + zookeeper + spring Boot框架整合与dubbo泛型调用演示   By:客 授客 QQ:1033553122  欢迎加入全国软件测试交流 QQ  群:7156436 ...

  7. Yii2基本概念之——事件(Event)

    说起事件(event),我们可是一点都不陌生.现实生活当中的事件无处不在,比如你发了一条微博,触发了一条事件,导致关注你的人收到了一条消息,看到你发的内容:比如你通过支付宝买东西,付了款,触发一个事件 ...

  8. ES6之Spread Operater拷贝对象

    译者按: 对象拷贝和合并使用展开运算符(Spread Operator)很方便! 原文: Master Javascript’s New, Cutting-Edge Object Spread Ope ...

  9. angular ng-repeat radio取值

  10. 30.Odoo产品分析 (四) – 工具板块(2) – 搜索和仪表盘(2)

    查看Odoo产品分析系列--目录 在前面的模块中,简单介绍过了odoo如何搜索系统中的各种数据集,并保存这些过滤器,以便在之后需要时能够轻松访问这些过滤器.这里将做更详细的介绍.最后分析仪表盘的功能, ...