wxss 不能引用本地图片

[longyiyiyu]

只能引用线上图片或者 base64

[longyiyiyu]

实际上是不需要在 wxss 里面使用本地图片的。

一般使用到图片的地方是 background，除了利用雪碧图技术之外，单独图片都可以使用 <image> 代替。

雪碧图技术是为了减少图片请求，但是小程序会把所有本地图片打包到程序包里，跟着代码一起下载下来，不存在请求的问题

有人会说图片太大？需要减小小程序包大小？但是问题是你见过有对大图片进行合并雪碧图的吗？

雪碧图本来就是给小图标用的

因此，在微信小程序不需要用雪碧图！

有一种场景可能感觉很需要雪碧图，那就是点击态图片，但实际上也可以通过 <image> 实现的，下面提供一个开发模式：

<button class="btn" open-type="share" hover-class="z-active">
  <image class="btn-icon" src="./images/[email protected]"></image>
  <image class="btn-icon f-active" src="./images/[email protected]"></image>
</button>

.btn {
  // ...

  &.z-active {
    .btn-icon {
      display: none;

      &.f-active {
        display: block;
      }
    }
  }
}
.btn-icon {
  // ...

  &.f-active {
    display: none;
  }
}

实际上就是使用两个 <image>，使用同一个样式，因为只是图片不一样
默认 active 的图片隐藏，点击的时候在替换一下就好了

[longyiyiyu]

另外要用到 background 的地方就是背景图了，那就让 <images> 绝对定位就可以了