Can not specify local image directly in Mini-Program of WeChat

发表于 更新于 分类于 阅读次数： Valine：
微信小程序中，background-image 无法直接指定本地图片

微信小程序使用本地图片作为 background-image 时报错

background-image: url(“/images/bg.jpg”);

设计理念

小程序倡导的是“轻应用”，本身只允许 2M 大小的程序，图片又比较占空间，所以小程序不推荐使用本地图片。

解决方案

外链

将图片放在服务器上，用远程图片链接地址代替。

BASE64 编码

将图片进行 BASE64 编码，然后再使用。

1
background-image: url("data:image/jpg;base64,iVBORw0KGgo=...");

image 标签

CSS百分比padding实现比例固定图片自适应布局« 张鑫旭-鑫 …

1
2
3
<view class="wapper">
    <image src="/images/bg.jpg" mode="widthFix"></image>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
.wapper {
    position: relative;
  	/* 图片高宽比 */
    padding-bottom: 56%;
    background-color: #ccc;
}

.wapper > image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}