小程序背景图片的坑

本人是前端菜鸟一个，比小白还要白，这完全是自己的经验总结，并不是要给各位分享什么宝贵经验哈，各位大佬不喜勿喷，不然会打击到我的哈哈

因为公司要求做几个小程序的页面，我不得不拾起丢弃了几个月的小程序开发，但我也不是有很丰富的小程序开发经验，算是入门级别吧

问题描述：在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