在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. sql 新增 修改 删除 列操作

    IF COL_LENGTH('SYS_Department', 'CreatedBy') IS NOT NULL --判断 SYS_Department 中是否存在 CreatedBy 字段 EXEC ...

  2. asp .net core Get raw request.

      小弟初来乍到,分享一些工作学习中遇到的问题和解决方式,如有不准确或是有错误的地方,希望不吝赐教,谢过了.  --Dogtwo 背景: 一个代理服务器BK,接收前端A发送的请求,记录log,并转发给 ...

  3. 水晶报表Crystal 无效索引

    这几天项目用到水晶报表做报表打印,没有前辈指导,都自己摸着石头过河,真是痛并快乐着.其实水晶报表还是挺好用的,对初学者也并不难(我就是初学者).昨天遇到一个问题:无效索引 ……开始以为是报表设置的问题 ...

  4. 12个敏捷过程的小提示Tips

    12个敏捷过程的小提示Tips 1. 可视化一切. 在团队里使用Scrum白板.同时走廊过道上也会挂上显示信息的白板,这些信息可以是公司战略.软件缺陷等等.可视化的好处是,员工经过这些白板时,能够了解 ...

  5. 学习记录---C# Web程序获取客户端电脑信息

    问题描述:由于最近项目需要使用Mac地址与注册码进行加密处理,但是又因为Web程序的局限性不能获取客户端电脑系统信息,当然IE浏览器有一个activex控件他是可以通过Js在前端代码中直接获取的,局限 ...

  6. 【Java每日一题】20170217

    20170216问题解析请点击今日问题下方的“[Java每日一题]20170217”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; public cla ...

  7. 详解margin： auto

    auto是margin的可选值之一.相信大家平时使用auto值时,最多的用法大概是 margin: 0 auto; 和 margin: auto; 不过你可能也发现了不论是 margin: auto; ...

  8. Github被微软收购，这里整理了16个替代品

    微软斥资75亿美元收购以后,鉴于微软和开源竞争的历史,很多开发者都感到惊恐.毕竟,互联网上最大的一块可以自由的净土被微软染指,宝宝不开森.如果你真的担心微软会对Github有所动作,那么这里我列举了1 ...

  9. 使用eclipse初步学习vue.js的基本操作 ①

    一.vue.js的初步认识 <a href="https://unpkg.com/vue ">vue.js下载</a> 1.抛开手动操作DOM的思维,Vue ...

  10. elementUI 时间格式化(一般方法)

    1.html: ... <el-table-column prop="updateTime" label="更新时间" width="160&q ...