小程序背景圖片的坑

本人是前端菜鳥一個,比小白還要白,這完全是自己的經驗總結,并不是要給各位分享什么寶貴經驗哈,各位大佬不喜勿噴,不然會打擊到我的哈哈

因為公司要求做幾個小程序的頁面,我不得不拾起丟棄了幾個月的小程序開發,但我也不是有很豐富的小程序開發經驗,算是入門級別吧

問題描述:在wxss文件引入背景圖片不成功

因為小程序的首頁就要用到背景圖片,所以一開始我就卡死了。根據以往html開發經驗,我們只要在css文件某個div的屬性background-image這里引入背景圖片就行。but...,然并卵,小程序出現這樣的錯誤,文檔解析


對的,這個錯誤提示已經很明顯了,本地資源圖片無法通過 WXSS 獲取,可以使用網絡圖片,或者 base64,或者使用<image/>標簽。提到的第一個方法,就是把圖片上傳到服務器,用服務器上圖片的鏈接代替,這個方法比較麻煩,我就放棄了。第二個方法就是轉換成base64


然后把編碼全部拷貝放到屬性background-image當中,即background-image:url("編碼")。這個方法雖說挺簡單方便,但是一大串編碼放到wxss文件當中,會造成視覺疲勞,更有密集恐懼這恐怕會摔電腦吧哈哈,所以只能另辟蹊徑。我想既然不能在wxss文件中引入本地資源圖片,那在wxml文件總可以吧,這時候我想到了行內樣式,像這樣

<view class='banner' style="background-image:url('asset/images/banner.jpg');">復制代碼

果不其然,成功了,背景圖片終于顯示出來了,爽歪歪.....可惜是我高興得太早了。正當我打開手機預覽頁面時,我又要崩潰了,背景圖片顯示不出來。。。。。

問題描述:背景圖片在開發者工具中可以顯示,在真機上看不到

我又上網找解決方法,后來發現只要把那個頁面的4個文件都放在根目錄就可以了,例如


問題迎刃而解。。。。。



轉載于:https://juejin.im/post/5c98f0d86fb9a070f6534f9c

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/275517.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275517.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275517.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

SimpleAdapter類使用方法

SimpleAdapter的構造函數是&#xff1a; public SimpleAdapter (Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to) 官方說明了其各個參數含義&#xff0c;我這里根據自己的理解解釋下&#xff1a; 第一個context&…

小程序 富文本自適應屏幕_自適應文本:跨屏幕尺寸構建可讀文本

小程序 富文本自適應屏幕Many of you may already know about responsive web design. Cited from Wikipedia, responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and windows or screen sizes. The respon…

Vue、React 之間如何實現代碼移植?

大家好&#xff0c;我是若川。面對前端最火的兩個框架&#xff0c;學 React 還是 Vue &#xff1f;這可能是每個前端人都曾糾結過的問題。不過&#xff0c;現在你不用糾結了——因為很多公司都是兩個框架都有大量的應用&#xff0c;取決于不同團隊的技術選型&#xff0c;特別是…

linux mariadb 亂碼,配置mariadb遠程訪問權限,解決數據庫亂碼問題

配置mariadb遠程訪問權限&#xff1a;1)登錄數據庫:# mysql -uroot -p2)配置授權數據庫用戶遠程訪問權限&#xff0c;%表示所有遠程IP&#xff0c;也可以指定IP。WITH GRANT OPTION表示mysql數據庫的grant表中重新加載權限數據&#xff1a;GRANT ALL PRIVILEGES ON *.* TO 用戶…

平面設計師和ui設計師_游戲設計師的平面設計

平面設計師和ui設計師Design is a very ancient practice, but graphic design really found its core principles post World War One. Games are also very ancient but video games are still finding their feet. I think graphic design has a few things to teach people…

從零開發一個命令行腳手架工具 等

大家好&#xff0c;我是若川。今天周末&#xff0c;話不多說&#xff0c;這一次花了幾小時精心為大家挑選了20余篇好文&#xff0c;供大家閱讀學習。本文閱讀技巧&#xff0c;先粗看標題&#xff0c;感興趣可以都關注一波&#xff0c;絕對不虧。前端宇宙小編就職于某大廠&#…

linux的HAL庫函數,STM32 HAL庫 IIC 協議庫函數

/* 第1個參數為I2C操作句柄第2個參數為從機設備地址第3個參數為從機寄存器地址第4個參數為從機寄存器地址長度第5個參數為發送的數據的起始地址第6個參數為傳輸數據的大小第7個參數為操作超時時間 */HAL_I2C_Mem_Write(&hi2c2,salve_add,0,0,PA_BUFF,sizeof(PA_BUFF),0x10)…

pku acm 2140 Herd Sums http://acm.pku.edu.cn/JudgeOnline/problem?id=2140

2140代碼短小精悍&#xff1a;#include<stdio.h> int main() { int cnt0,i; long s; scanf("%ld",&s); for(i1;(i1)*i/2<s;i)if((s-(i-1)*i/2)%i0)cnt; printf("%d\n",cnt); return 0; }轉載于:https://www.cnblogs.com/Chinese-Coder-C…

java合成海報的工具類

2019獨角獸企業重金招聘Python工程師標準>>> package io.renren.common.utils;import cn.hutool.core.lang.Console; import io.renren.modules.oss.cloud.OSSFactory;import javax.imageio.ImageIO; import javax.imageio.stream.ImageOutputStream; import java.a…

a說b說謊b說c說謊說d說_說謊的眼睛及其同伙

a說b說謊b說c說謊說d說The eye is a complex and temperamental organ. By the end of this article, designers will have a better understanding of how the eye works with the brain, how it deconstructs images that the brain stitches back up again, and how the two…

一名運營,自學一年前端,成功入職杭州某獨角獸企業,他的面試經驗和學習方法等分享...

大家好&#xff0c;我是若川。這是我的微信群里小伙伴年年 的投稿。他是19年畢業&#xff0c;之前做的是運營相關的工作&#xff0c;在我的交流群里非常活躍&#xff0c;自學一年前端&#xff0c;目前成功轉行入職杭州一家獨角獸企業。相信他的文章能帶給大家一些啟發和激勵。0…

linux下svn relocate,如何進行svn?relocate?操作

1。進入工作復本&#xff03;> cd ~/test2。查看倉庫地址(URL)&#xff03;> svn info路徑&#xff1a;.地址(URL)&#xff1a;http://192.168.28.1/repos/test檔案庫 UUID&#xff1a;a81f9bed-3506-0410-b369-e50476f75162修訂版&#xff1a;44節點種類&#xff1a;目錄…

教你怎么買虛擬空間(轉)

虛擬空間是什么?經常聽到站長們在群里問&#xff0c;哪里的虛擬空間好?哪里的虛擬空間性能好?哪里的虛擬空間便宜?虛擬空間是當今IDC行業的一個重要銷售產品&#xff0c;虛擬空間也是中國站長們建設網站中最常應用的網站載體。各種數據說明&#xff0c;虛擬空間的好壞能影響…

React筆記-事件分發

事件分發 之前講述了事件如何綁定在document上&#xff0c;那么具體事件觸發的時候是如何分發到具體的監聽者呢&#xff1f;我們接著上次注冊的事件代理看。當我點擊update counter按鈕時&#xff0c;觸發注冊的click事件代理。 function dispatchInteractiveEvent(topLevelTyp…

百度指數可視化_可視化指數

百度指數可視化Abstract:– Analysis of the visual representations of exponentials.– Proposals to solve current visualization issues.– Call to discussion to come up with a better visual representation convention.抽象&#xff1a; –分析指數的視覺表示形式。…

qemu+linux+x86+64,kvm 內部錯誤:無法找到適合 x86_64 的模擬器

本文將為您描述kvm 內部錯誤&#xff1a;無法找到適合 x86_64 的模擬器,教程操作方法:0x00 問題安裝完 KVM 之后&#xff0c;啟動管理工具報錯&#xff1a;內部錯誤&#xff1a;無法找到適合 x86_64 的模擬器于是查看 libvirtd 服務狀態&#xff0c;查看到以下內容&#xff1a;…

阿里云謙大佬:時間精力有限的情況下如何高效學習前端?

大家好&#xff0c;我是若川。最近組織了源碼共讀活動1個月&#xff0c;200人&#xff0c;一起讀了4周源碼&#xff0c;歡迎加我微信 ruochuan12 進群參與。今天分享一篇阿里云謙大佬的文章。昨天在群里也有小伙伴說到&#xff1a;大佬們是需要什么學什么&#xff0c;新手一般是…

JQuery小記

訪問dom元素 $代表整個dom tree $("#content") $("p") $("li .red") 字符串轉換為json對象 $.parseJSON ajax $.ajax({type: "post",url: "GetUser.ashx",success: function (data) {var t "";var json $.pars…

React個人整理

React基礎//ReactDOM.render(reactWhat,domWhere)在瀏覽器中渲染應用的一種途徑 //React.DOM表示預定義好的HTML元素集合 //React.DOM.h1(attributes,children)表示一個預定義的React 組件 //h1()第一個參數接收一個對象&#xff0c;用于指定該組件的任何屬性&#xff08;比如i…

sketch鋼筆工具_Sketch和Figma,不同的工具等于不同的結果

sketch鋼筆工具We like to compare the difference between various design programs and debate about which one is the most powerful. But we often forget to reflect on how using one of these tools is impacting our product. A powerful artist would say that he ca…