微信小程序不能使用background-image问题解决。

报错信息:

VM2440:1 pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用标签。

e374f1edb53b6adb58eb946f510dc56b.png

使用background-image报错信息

报错位置 background-image:

.box1 {

background-color: #99cccc;

background-image: url('../images/12.jpg');

background-repeat: no-repeat;

background-position: center;

}

e1202349e58c554456202480ac455e2b.png

报错代码

解决方案一:将图片12.jpg 转换为base64,然后将得到的字符放到background-image属性值中(http://tool.chinaz.com/tools/imgtobase) :
图片转换为Base64:

6d83fdc9483a70757244c377e25bab48.png

将图片12转换为base64

将图片转换为base64的编码,复制到对应的CSS代码中,重新编译小程序即可。

2b99e1f36f5b03cf477a5b858388e186.png

复制base64编码

解决方案二:使用网络图片 :

.box2 {

background-color: #0099cc;

background-image: url(http://7.url.cn/edu/user/1141e2462a13a5e3e99bcaf164818a1f.png);

background-repeat: no-repeat;

background-position: center;

}

9ad1918930fb4e4fd97f753d4907ab32.png

使用网络图片

页面效果图如下:

5918619dda7a9e57dbe770ab101b3e32.png

left为base64,right使用网络图片

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐