微信小程序 – “本地资源图片无法通过WXSS 获取,可以使用网络图片,或者 base64,或者使用标签” 解决

时间:2020-7-30 作者:admin


报错过程

index.wxml

<view class="bg"></view>

index.wxss

.bg {
  background:url('/images/banner/one.jpg')
}

然后就报错了:
微信小程序 - “本地资源图片无法通过WXSS 获取,可以使用网络图片,或者 base64,或者使用标签” 解决
具体不知道微信为什么做出这样的限制,但是有 三种办法 可以解决,具体请继续看。

第一种

可把图片上传放在 CSDN 文章内,然后 F12 拿到图片地址。

最简单,直接使用网络图片的 绝对路径(http://xxx),具体实现如下:

index.wxml

<view class="bg"></view>

index.wxss

.bg {
  background:url('https://static.easyicon.net/preview/128/1289279.jpg')
}

第二种

直接将 style 样式写在标签里,这样就不会在 CSS 中编译了,具体实现如下:

index.wxml

<view style=" background:url('https://static.easyicon.net/preview/128/1289279.jpg')"></view>

index.wxss

/* .bg {...} */

第三种(不推荐)

这种方式不推荐,繁琐且效果差(就因为一个图片多了一大坨代码。。。这绝对不行。。)

将本地图片通过 第三方平台 转为 Base64 ,然后放入路径里,具体实现如下:

首先转换:
微信小程序 - “本地资源图片无法通过WXSS 获取,可以使用网络图片,或者 base64,或者使用标签” 解决
然后放入:

index.wxml

<view class="bg"></view>

index.wxss

.bg {
  background:url('data:image/jpg;base64,/9j/4AAQSkZJR[此处省略几万个字符]')
}
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。