小程序开发background-image不显示的问题

问题

最近在开发公司的小程序，发现使用本地路径图片不显示。

css 复制代码

background-image: url("/pages/image/Dgua.png");
// 文件名仅用作本文示例,开发的时候用这种不清不楚的文件名就等着挨锤吧

图片没有生效，但是HBuilder也没有报错信息，检查过文件路径和文件名发现也没有问题。

原因

经过检索发现问题原因是：

微信/抖音小程序出于安全与性能方面的考虑，不允许使用本地路径作为 background-image 的 url 值。通常仅支持 Base64 编码的图片数据和网络图片。

解决方案

发现问题之后就好办了，对症抓药：

1. 把图片转为base64的格式

一些网站提供了图片转base64的工具，比如:图片转Base64

我们可以在这里直接复制css的代码，把它的类名改成自己的类名即可。

一些更好的实践

但是就有一个问题，这一大坨代码扔进css里也太夸张了，代码显得冗长且不美观，同时也会增加代码的维护难度，十分拉低逼格，万一影响我出任ceo，迎娶白富美，走上人生巅峰可怎么办呢？

哎，主播这里刚好有几个办法：

可以借助 CSS 变量把 Base64 数据存起来，这样能让 CSS 代码更简洁易读。

css 复制代码

:root {
   // 路径换成你自己的base64数据，别搁这复制辣
    --image1: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
}

.element {
    background-image: var(--image1);
    width: 200px;
    height: 200px;
}

使用外部CSS文件，将Base64编码的图片存储在单独的CSS文件中，然后在主CSS文件中通过 @import 引入。

less 复制代码

// 给这个取给文件名比如说叫background-images.less
@background-image-base64: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...');

less 复制代码

@import "background-images.less";

.page {
    background-image: @background-image-base64;
    background-size: cover;
    background-position: center;
}

2.把图片上传到网络然后使用网络图片

这个就不用讲了,找一个图床网站上传上去然后直接复制url就行了。

思考

一般来说上面两个办法都能解决掉问题，但是解决完问题之后我突然产生了新的疑惑：

思考1

我发现我有些时候竟然可以用本地路径成功地作为background-image 的 url 值，这又是怎么回事呢？

比如我有一个 fire.png但是我直接把它放到 background-image作为 url 竟然真的成功生效了，望着满屏幕的火焰logo我陷入了一瞬间的迷茫（迷茫的时候不妨听听控制台的话）

我打开了抖音的开发者工具，看到控制台里成功加载了一大堆图片，发现原来是我在这个组件里有用到fire.png来作为某个img的src属性。

小程序有自己的缓存机制，若小图片之前已经被加载过，并且被缓存到本地，那么再次使用时可能会看起来像是本地图片直接生效。不过实际上，这是因为缓存的存在，使得图片能快速从本地缓存中读取并显示，并非真正直接使用本地路径。

思考2

既然本地路径不能作为 background-image 的 url 值，那为什么可以作为img 标签的 src值呢？

（我觉得你是在针对我胖虎，为什么人家img可以俺background-image就不行？气抖冷）

AI给了我这么几个原因：

1. 渲染机制与性能

img 标签 ：img 标签是专门用于展示图片的 HTML 元素，小程序框架对其做了特殊优化。当使用本地图片时，框架能高效地处理图片的加载和渲染，并且在内存管理方面也有对应的策略。比如，它可以按需加载图片，根据图片的实际大小和显示区域进行适配，不会过多占用内存资源。
background-image ：背景图片一般用于装饰页面元素，其渲染机制和 img 标签不同。如果允许使用本地图片路径，会给框架的资源管理带来复杂性。例如，背景图片可能会应用于多个元素，且可能会进行重复渲染，直接使用本地路径可能会导致资源加载混乱，影响性能。

2. 安全和权限管理

img 标签 ：小程序通常会对 img 标签的本地图片加载有明确的权限控制和安全检查。当使用 img 标签时，开发者可以清晰地指定加载哪些本地图片，小程序可以对这些操作进行有效的监控和管理，确保图片来源的合法性和安全性。
background-image：由于背景图片的使用场景较为灵活，可能会在不同的样式规则中动态设置。如果允许使用本地图片路径，可能会增加安全风险，例如恶意代码可能会通过修改样式来加载敏感的本地图片文件。限制为 Base64 或网络图片可以更好地控制图片的来源，增强安全性。

3. 跨平台兼容性

img 标签 ：img 标签是标准的 HTML 元素，在不同平台和环境下都有较好的兼容性。小程序框架对其进行了封装和适配，使得在本地图片加载方面能够保持一致的表现。
background-image：不同平台对背景图片的处理方式可能存在差异。使用 Base64 或网络图片可以避免因平台差异导致的兼容性问题，确保在各个平台上都能正常显示背景图片。

总结

微信/抖音小程序出于安全与性能方面的考虑，不允许使用本地路径作为 background-image 的 url 值。通常仅支持 Base64 编码的图片数据和网络图片。
小程序有自己的缓存机制，若小图片之前已经被加载过，并且被缓存到本地，那么再次使用时可能会看起来像是本地图片直接生效。不过实际上，这是因为缓存的存在，使得图片能快速从本地缓存中读取并显示，并非真正直接使用本地路径。
img 标签有特殊优化，能按需加载和适配，内存管理高效；background-image 若用本地路径，会增加资源管理复杂性和性能风险。
img 标签的本地图片加载有明确权限控制和安全检查；background-image 使用本地路径可能被恶意利用，限制为 Base64 或网络图片可增强安全性。
img 标签是标准元素，小程序适配后本地加载表现一致；background-image 不同平台处理有差异，使用 Base64 或网络图片可避免兼容性问题。