问题 :微信小程序通过css:background-image引入背景图片失败
[渲染层网络层错误] pages/wode/wode.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签
解决方法微信小程序在使用background-image设置背景图时报错:渲染层网络层错误_index.wxss 中的本地资源图片无法通过 wxss 获取-CSDN博客
背景图片相关应用-铺满,自适应_backgroundimage铺满-CSDN博客
// html代码
<view class="test" style="background-image: url('/images/myInfoBg.png')">
</view>
// css 代码
.test{
background-size: contain;
}
上述方法之后,真机运行仍然显示不出图片可以使用以下方法
微信小程序背景图片真机不显示问题 - 代码先锋网
1.图片转basd64 (常用方法)
Background_base64: function (path) {
return 'data:image/jpg;base64,' + wx.getFileSystemManager().readFileSync(path, 'base64');
},
let img_path = Background_base64('../pages/images/adventure_bac.jpg');
this.setData({
img_path: img_path
})
wxml
<view style="background-image: url({{img_path}});"></view>
2.使用<image />文章来源:https://www.toymoban.com/news/detail-761026.html
<view style="">
<image style="position: absolute;width: 100%;height: 100%;" src=""></image>
</view>
3.将图片放在服务器上,并使用http访问文章来源地址https://www.toymoban.com/news/detail-761026.html
到了这里,关于微信小程序背景图片设置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!