做小程序时,满心欢喜给页面加背景图，结果预览要么一片空白，要么只显示一半？这事儿不少开发者都栽过跟头～其实背景图不显示，往往是路径、格式、权限这些细节没踩对，下面把常见“踩坑点”拆成7个模块，从基础到进阶，一步步教你把背景图“拉回”页面！
小程序里图片路径分**本地**和**网络**两种，但不管哪种，路径写错就像快递送错地址，图片根本到不了位。
本地图片：路径“层级”搞反了
很多人习惯把图片丢到项目根目录的images文件夹，然后写url('/images/bg.png')，结果开发工具能临时显示，手机上却没了！这是因为小程序本地图片要“从页面所在目录算起”，比如你的页面在pages/index/index.wxml，图片放在pages/index/images/bg.png，那正确路径得是url('/pages/index/images/bg.png')（用绝对路径，以开头代表项目根目录）；要是用相对路径，得写成url('../images/bg.png')（从index.wxml往上跳一级到pages/index，再进images）。
举个真实案例：小李把背景图塞到utils文件夹（工具类目录），代码里路径写/utils/bg.png，结果小程序根本不认这个“工具类”里的图片——小程序默认优先识别pages、components这些业务目录，把图片挪到pages下的images文件夹，路径改对后立马显示！
网络图片：域名/协议“缺胳膊少腿”
如果用网络图片当背景,首先得检查协议和域名拼写，比如把https://xxx.com/bg.png写成http://xxx.com/bg.png，开发工具可能临时放行，但手机端（尤其是安卓）会直接拦截（因为小程序要求网络请求用HTTPS）；要是域名多打了个字母，比如https://xx.com/bg.png写成https://xxo.com/bg.png，直接404找不到资源。
网络图片域名必须配置“合法域名”！登录小程序后台，进「开发」-「开发设置」-「服务器域名」，把图片所在域名加到request合法域名里（注意是request，不是upload或download，因为background-image属于资源请求），要是没配置，就算路径对了，小程序也会“拦着不让进”。
格式与大小：图片本身“不达标”
就算路径对了,图片格式、大小不符合要求，也会“隐身”，这就像电影院不让带超标行李，图片得先“符合规则”才能进场。
格式错了：小程序“不认”这种图
小程序支持的图片格式主要是JPG、PNG、GIF（部分场景），要是你用了WebP、SVG这些格式，除非专门配置兼容，否则直接不显示，比如小张用PS导出了WebP格式的背景图，开发工具里预览一片空白，改成PNG后立马正常。
GIF图在小程序里只有作为image组件src时能动，当background-image用的话，只会显示第一帧静态图（甚至不显示），所以想做动态背景，优先用image组件+定位，别用background-image。
尺寸/大小超标：加载慢到“隐身”
本地图片如果太大（比如单张500KB以上），小程序加载时会卡顿甚至直接跳过；网络图片要是服务器限制了“防盗链”（响应头里有referer校验），或者图片本身超过服务器配置的大小，也会403或超时不显示。
解决方法很简单：用TinyPNG压缩图片（能把500KB压到100KB以内，画质几乎不变）；网络图片找后端同学检查服务器配置，比如放开referer限制，或者确认CDN是否支持小程序域名访问。
权限与域名：网络图片“没通行证”
小程序对网络资源管控很严,背景图想走“网络通道”，必须拿到“通行证”——合法域名配置+HTTPS协议。
合法域名：必须“报备”才能用
前面提过,网络图片域名要加到request合法域名里，但很多人容易踩的坑是：加错域名类型（比如加到upload域名里，background-image属于普通资源请求，得用request）、域名没带协议（配置时要写完整的https://xxx.com，不能只写xxx.com）、忘记部署SSL证书（域名是HTTP的，小程序不允许加载）。
调试时打开开发工具的「控制台」-「Network」，看图片请求状态：如果是403，大概率域名没配置或协议错了；如果是pending，可能是HTTPS证书过期或无效。
本地图片转Base64：绕开域名限制
如果不想折腾域名配置,小尺寸本地图片（比如10KB以内）可以转成Base64编码，直接写在样式里，比如用在线Base64转换工具，把bg.png转成一串字符，然后写background-image: url('data:image/png;base64,iVBORw0KGgo...');，这样既不用管域名，也能让背景图显示～
注意：Base64编码后字符会变长，大图片转了之后代码会很臃肿，所以只适合小图标、小背景图。
样式写法：background-image“有特殊要求”
小程序的CSS和网页CSS有区别,尤其是background-image，踩错规则直接“失效”。
background-image：只认“网络/Base64”
网页里可以写background-image: url('../images/bg.png')，但小程序不支持本地相对路径直接当background-image的url！就算你路径写对了，小程序也会把它当成网络地址去请求，结果404。
所以本地图片当背景,要么转Base64，要么用image组件+绝对定位模拟背景：把image组件设为position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;，这样image就当背景铺在底层，上面的内容正常写。
样式细节：尺寸、重复、容器高度
就算background-image路径对了，还有可能“显示不全”或“看不见”：
容器没高度：比如给
view设了background-image，但view，height是0，背景图自然没地方显示，解决：给容器加height: 100vh;（占满屏幕高度）。background-size没设：默认是auto，图片可能只显示左上角一小块，改成background-size: cover;（铺满容器，可能裁剪）或contain;（完整显示，可能留空白）。background-repeat重复：如果图片很小，默认repeat会铺满，但要是你想要单张背景，得设background-repeat: no-repeat;。
缓存与调试：“旧数据”挡住新图片
有时候路径、格式都对，但背景图还是不显示，大概率是缓存在捣乱——开发工具或手机端还留着旧版本的资源。
开发工具清缓存
点击开发工具左上角「编译」旁边的「清除缓存」按钮，选择「清除全部缓存」，然后重新编译，很多时候清完缓存，图片就乖乖出现了～
手机端清缓存
真机调试时,退出小程序（从最近任务栏划掉），重新打开；或者直接删除小程序（微信里长按小程序图标，点「删除」），再重新扫码预览，这样能彻底清空手机端的缓存。
控制台抓包排查
开发工具的「Console」面板会显示资源加载错误，比如Failed to load resource: net::ERR_NAME_NOT_RESOLVED（域名解析失败）、404 Not Found（路径错误）。「Network」面板能看到图片请求的状态码，红色的请求就是有问题的，点进去看响应信息，精准定位原因。
组件层级：背景被“盖”住了
背景图明明存在,却被其他组件“压在下面”，这就是层级（z-index）的锅。
比如你给背景图所在的view设了z-index: 0，但上面的button、swiper组件设了z-index: 1，背景图就会被盖住，解决方法：
给背景容器设
z-index: -1（前提是父容器是relative定位），让它在最底层；检查其他组件的
z-index，确保背景图所在层级足够低；用
image组件当背景时，确认它的position是absolute，且父容器是relative，避免定位溢出。
分包与自定义组件：路径“跨区”迷路
如果你的小程序用了分包或自定义组件，图片路径更容易“迷路”。
分包路径：从分包根目录算起
假设小程序有个分包叫packageA，路径是subpackages/packageA/pages/index/index.wxml，图片放在subpackages/packageA/images/bg.png，那引用时路径得是/subpackages/packageA/images/bg.png（绝对路径），或者相对路径../images/bg.png（从index.wxml往上到packageA目录，再进images），要是写成/pages/images/bg.png，就会跑到主包的pages目录找图片，自然找不到。
自定义组件：路径相对组件
自定义组件放在components/my-bg/my-bg.wxml，图片放在components/my-bg/images/bg.png，那在组件的样式里，路径得是url('./images/bg.png')（相对组件本身的目录），如果组件被pages/index/index.wxml引用，别以为路径要改成pages下的，组件内部路径只认自己的目录结构～
小程序背景图不显示,核心是路径准确性、资源合法性、样式兼容性这三大块，遇到问题时，按「路径→格式→权限→样式→缓存→层级→分包/组件」的顺序排查，基本能覆盖99%的场景，要是还解决不了，评论区留言，咱们一起揪出“隐身”的背景图～
网友回答文明上网理性发言已有0人参与
发表评论: