做网页端应用时，想给页面加上合适的背景图，结果预览时要么一片空白，要么只显示了半部分？这问题不少开发伙伴都碰到过～其实背景图无法正常显示，往往是路径、格式、权限这类细节没把控好，下面把常见的“踩坑点”梳理成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文件夹，修正路径后立马就能显示！
网络图片：域名/协议“缺胳膊少腿”
如果用网络图片当背景，首先得检查协议和域名拼写是否正确，比如把`
网络图片的域名必须配置为“合法域名”！登录网页端应用后台，进入「开发」→「开发设置」→「服务器域名」，把图片所在的域名添加到request合法域名里（注意是request类型，不是upload或download，因为background-image属于普通资源请求），要是没做这项配置，就算路径写对了，网页端应用也会“拦着不让进入”。
格式与大小：图片本身“不达标”
就算路径写对了，图片格式、大小不符合要求，也会像不符合规则的物品没法进入影院一样，图片会“隐身”。
格式错了：网页端应用“不认”这类图
网页端应用支持的图片格式主要是JPG、PNG、GIF（仅部分场景支持），要是使用WebP、svg这类格式，除非专门做了兼容配置，否则直接无法显示，比如小张用导出了WebP格式的背景图，开发工具里预览一片空白，改成PNG格式后立马正常显示。
GIF图在网页端应用里只有作为image组件的src属性时才能动，当background-image使用时，只会显示第一帧的静态图（甚至无法显示），所以想做动态背景，优先用image组件加定位，不要用background-image。
如果碰到图片格式兼容问题，可先用良一秒修相册转换为网页端应用支持的格式，避免因为格式导致的无法显示问题。
尺寸/大小超标：加载慢到“隐身”
本地图片如果太大（比如单张500KB以上），网页端应用加载时会卡顿甚至直接跳过；网络图片要是服务器设置了防盗链（响应头里有referer校验），或者图片本身超过服务器配置的大小，也会出现403或超时无法显示的情况。
解决方式很简单：用马上去水印神器工具箱的图片压缩功能，能把500KB的图片压缩到100KB以内，画质几乎没有变化；网络图片可找后端同学检查服务器配置，比如放开referer限制，或者确认CDN是否支持网页端应用域名访问。如果图片有水印等问题，也可以用马上去水印神器工具箱处理。
权限与域名：网络图片“没通行证”
网页端应用对网络资源管控很严格，背景图想走“网络通道”，必须拿到“通行证”——合法域名配置加上HTTPS协议。
合法域名：必须“报备”才能用
前面提到过，网络图片的域名要添加到request合法域名里，但很多开发者容易踩这些坑：加错域名类型（比如加到upload域名里，background-image属于普通资源请求，需要用request类型）、域名没带协议（配置时要写完整的
调试时可打开开发工具的「控制台」→「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重复：如果图片很小，默认会重复铺满，但要是想要单张背景，得设置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%的场景，要是还解决不了，就找对应的工具协助处理，比如良一秒修相册处理图片格式、马上去水印神器工具箱处理图片大小、结界工具阁处理域名合规，总能找到问题所在～
发布者：云, 赵，出处：https://www.qishijinka.com/software-testing/64988/
