在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. Entity Framework Code first(转载)

    一.Entity Framework Code first(代码优先)使用过程 1.1Entity Framework 代码优先简介 不得不提Entity Framework Code First这个 ...

  2. mysql数据表的基本操作

    好久没梳理下Mysql基础命令了.今天抽空整理了下,虽然很简单...但是还是有必要巩固下基础滴啦 1.创建表:之前需要use database database_name 然后create table ...

  3. JSP使用过滤器防止SQL注入

    什么是SQL注入攻击?引用百度百科的解释: sql注入_百度百科: 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具 ...

  4. angular ng-file-upload

    传送门:https://github.com/danialfarid/ng-file-upload#install <script src="angular(.min).js" ...

  5. 小tips:Hbuilder编辑器开启less自动编译为css的方法

    1.首先,依次打开菜单栏->工具->预编译器设置,打开后是这样的: 2.然后点击新建. 3.文件后缀为.less触发命令地址就是lessc.cmd所在的地址,先用npm全局安装less, ...

  6. HTML DOM classList 属性

    页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加 ...

  7. 如何用ABP框架快速完成项目(3) - 为什么要使用ABP和ABP框架简介

    首先先讲为什么要使用ABP? 当然是因为使用ABP可以快速完成项目啦. 时间就是金钱, 效率就是生命嘛   有了ABP, 你就节省了写如下模块的时间: CRUD数据库基本操作 校验 异常处理 日志 权 ...

  8. 行业观察报告:从SAAS困局看行业趋势 ZT

    企业管理软件的演化过程 第一阶段:独立开发 典型代表:IBM 这个阶段是将企业的信息化需求整合成硬件+软件的一体化解决方案,从零开始设计开发,适用于通讯.电力.交通等基础设施建设项目.这个阶段的特点是 ...

  9. error 2593 operator << 不明确的可能的解决方法

    编译Martinez算法时遇到该问题,提示重载的<<操作符调用不明确. 解决方法为:在cpp文件中将重载的该操作符的实现前添加完整的命名空间路径.

  10. LVS + HAProxy实现跨网负载均衡