本人是前端菜鸟一个,比小白还要白,这完全是自己的经验总结,并不是要给各位分享什么宝贵经验哈,各位大佬不喜勿喷,不然会打击到我的哈哈
因为公司要求做几个小程序的页面,我不得不拾起丢弃了几个月的小程序开发,但我也不是有很丰富的小程序开发经验,算是入门级别吧
问题描述:在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个文件都放在根目录就可以了,例如
问题迎刃而解。。。。。