說(shuō)在前面
最近由于項(xiàng)目需要所以學(xué)了下小程序,也做了一些東西,隨后便有了以下的一些總結(jié)了,先說(shuō)說(shuō)關(guān)于如何解決小程序背景圖片pc端調(diào)試完美不缺,而在真機(jī)調(diào)試的時(shí)候卻消失不見(jiàn)的情況。
問(wèn)題描述
最近做項(xiàng)目的時(shí)候要實(shí)現(xiàn)一個(gè)導(dǎo)航頁(yè)面,我的想法是用一張好看的圖片做背景,在pc端調(diào)試的時(shí)候效果不錯(cuò),但是在真機(jī)調(diào)試的時(shí)候卻發(fā)現(xiàn)那張背景圖片不翼而飛了。
老規(guī)矩,以源碼為導(dǎo)向
index.xml
<view class="container" bindtap="coming"></view>
index.wxss
page{ height: 100%; }.container{ background-image: url("../resources/images/wait.png"); background-size:100% 100%; background-repeat:no-repeat; }
在pc端調(diào)試的時(shí)候已經(jīng)可以看到出現(xiàn)背景圖片了,但是在真機(jī)調(diào)試的時(shí)候卻發(fā)現(xiàn)沒(méi)有背景圖片,那么原因是什么呢?我谷歌了多次之后以及翻看了小程序的文檔之后發(fā)現(xiàn)這可以說(shuō)是小程序的一個(gè)bug,我相信小程序在不久會(huì)解決這個(gè)bug,但是我們現(xiàn)在要用到,總不能等到對(duì)方法解決了bug我們才用背景圖片吧?對(duì)的,這里提供了幾種解決方法!
解決方法一:在使用背景圖片的時(shí)候用網(wǎng)絡(luò)圖片,就是用外鏈的形式,比如你將這張圖片放到你的服務(wù)器,如:https://xxxx/xxx.jpg;
解決方法二:將背景圖片使用編碼base64進(jìn)行轉(zhuǎn)換,可以在這個(gè)網(wǎng)址進(jìn)行http://tool.css-js.com/base64.html 轉(zhuǎn)換,如:background-image: url("轉(zhuǎn)換后得到的編碼文本"),如果多次使用的話可以將該值設(shè)置為全局變量,再在js文件進(jìn)行引用即可;
解決方法三:使用image組件而去掉背景圖片;
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)