微信小程序 - “本地资源图片无法通过WXSS 获取,可以使用网络图片,或者 base64,或者使用标签” 解决
程序员文章站
2022-03-04 21:27:40
报错过程index.wxml index.wxss.bg { background:url('/images/banner/one.jpg')}然后就报错了:具体不知道微信为什么做出这样的限制,但是有 三种办法 可以解决,具体请继续看。第一种可把图片上传放在 CSDN 文章内,然后 F12 拿到图片地址。最简单,直接使用网络图片的 绝对路径(http://xxx),具体实现如下:index.wxml&...
报错过程
index.wxml
<view class="bg"></view>
index.wxss
.bg {
background:url('/images/banner/one.jpg')
}
然后就报错了:
具体不知道微信为什么做出这样的限制,但是有 三种办法 可以解决,具体请继续看。
第一种
可把图片上传放在 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
,然后放入路径里,具体实现如下:
首先转换:
然后放入:
index.wxml
<view class="bg"></view>
index.wxss
.bg {
background:url('data:image/jpg;base64,/9j/4AAQSkZJR[此处省略几万个字符]')
}
本文地址:https://blog.csdn.net/weixin_44198965/article/details/107672275
上一篇: 电脑版微信怎么玩跳一跳? 微信跳一跳在电脑上的玩法
下一篇: 老师的好帮手——课堂考勤记录整合