在开发微信小程序的过程中，我们经常会通过css设置背景图，但是在实际开发的过程中，经常会有图片不显示，不能用，并且报错，提示

common/main.wxss中的本地资源图片无法通过WXSS获取，可以使用网络图片，或者base64，或者使用<image/>标签。

这是怎么回事呢？

其实这是一个很常见的问题，图片本身是没问题的，在微信小程序中使用<image>标签插入也是没问题，可以正常显示的。但是在微信小程序中，如果通过css的background-image来显示，则微信小程序会限制图片的大小，一般情况下是不能超过50kb，图片的大小超出了50kb就会出现这个提示。用background-image来显示一些小一点的图片，是没有问题的。

当遇到这种问题时，可以用以下四种方法解决：
1.将图片压缩，或是调整尺寸，将文件大小压缩至50kb以下。
2.如果图片文件实在太大，可以将图片文件，上传至服务器或者cdn网络，通过url的形式来调用图片，这个时候是不限制图片大小的。如

#微信小程序css调用远程图片的方法
background-image:url('https://www.dls6.com/hello.jpg';)

3.如果没有服务器或者cdn不能上传图片，可以将图片转为base64代码的形式写在css中，也是一样可以用的。

#微信小程序css调用base64图片的方法
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");

4.不使用css的background-image来显示图片，在微信小程序中，通过<image src=?>的方式来加载图片。

总结与建议：
开发微信小程序时，建议将所有的图片、JS等静态文件，通过CDN的形式部署在内容分发网络上。一方面是可以大大的提高静态资源的加载速度，提升用户体验，一方面是不占用本地资源，也会提升小程序的加载速度。

同时，对比较大的图片，强烈不建议放在本地，即使图片可以显示不报错，在最终上传微信小程序代码时，也有可能会提示文件包过大，无法上传！到头来还是要进行图片压缩、分包、精简的形式，重新调整架构，重复做无用功！

微信小程序在开发时，一定要提前做好整体方案架构的规划，文件目录结构、图片、css、js等静态资源，分门别类、部署明确、配置合理，尽量避免做出一个臃肿的、冗余的小程序，尽量做到小程序的轻量化、快速加载、极速响应，提升用户体验，增强用户黏度。

如果你也在开发微信小程序，或是在开发微信小程序中遇到了相关的问题，欢迎联系丁老师进行交流和咨询！

微信小程序定制开发 做好上线后再收费