在开发微信小程序的过程中,我们经常会通过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等静态资源,分门别类、部署明确、配置合理,尽量避免做出一个臃肿的、冗余的小程序,尽量做到小程序的轻量化、快速加载、极速响应,提升用户体验,增强用户黏度。
如果你也在开发微信小程序,或是在开发微信小程序中遇到了相关的问题,欢迎联系丁老师进行交流和咨询!
每次使用都要在网上查询,关键词也不好搜,直接发布在这里,以供不时之需,需要请直接copy。$(function(){console.log('丁老师软件开发做APP、小程序、网站');});
经常使用Phpmailer来发信,作为事件的通知渠道,遇到过各种情况的问题,总结了一些经验和注意事项分享给大家:1.phpmailer使用ssl发信,无需在服务器中开启任何端口,无需在防火墙中开启端口;2.出现SMTPError:Cou...
自从AI应用普及以来,各大厂都相应推出了自己的AI编程工具,好不好用先不说,今天咱们把这些工具列出来,并进行一个简单的对比。国内大厂工具腾讯CodeBuddy,是全流程AI一体化工作台,是以vscode插件的形式存在,在vscode中可...
在使用wordpress的过程中,有的时候部分页面打不开,或是程序不能正常使用,也没有显示具体的错误信息,这个时候该怎么办呢?首先是查看错误日志,可以查看wordpress本身的错误日志,以及php的错误日志。这时有朋友提问了,word...
普通账号个人认证号企业认证号蓝色认证标识薯条推广聚光平台效果广告普通应商业合作以KOL/KOC身份和品牌合作以品牌方身份发起起合作开设店铺个人店铺或个体户(不支持港澳台公司申请)旗舰店店或专卖店(支持港澳台公司申请)主动私信每天10位陌生用...
挺不错的浏览器,强加入了edgeimageviewer图片浏览器,感觉不是那么好,对于开发者来说,更想要原生的东西。包括微信网页版里的表情图片,用edgeimageviewer打开的话,无法保存为gif格式,即使保存了,也只是第一帧静态的。...
二维码码有三个参数:数据类型、大小(“像素”数)和纠错级别。能存储多少信息也取决于这些参数。例如,纠错级别越低,可存储的信息越多,但代码越难被读者识别。最大尺寸和最小纠错值如下:最大字符数7089个字符(纯数字)字母数字4296个字符(字母...
最近要在某单位内网部署项目,使用了lnmp来配置环境,软件安装成功,可安装后不管是打开ip地址还是默认站点,都提示nginx403forbidden,这是怎么回事呢?首先,已经出现了nginx403提示,说明nginx是安装正常的。其次,4...