uniapp开发微信小程序 ,使用本地图片做背景图应该怎么处理

<view class="answering_page" v-if="bgImg" :style="{'backgroundImage':backBg}">
</view>

文章来源地址https://uudwc.com/A/pL6NV

data(){
return{
bgImg: '/static/image/background.png',
}},
computed:{
            backBg(){
               //这里在引用全局定义的图片转base64方法,处理成base64主要是在开发者工具中调试便于图片能够正常显示
                return 'url('+getApp().globalData.urlToBase64(this.bgImg)+')'
            },
}
//图片转换base64
urlToBase64(url){
            let imgBase64 = wx.getFileSystemManager().readFileSync(url, "base64"),
            base64Url = `data:image/png;base64,${imgBase64}`;
            return base64Url;
            }

注意,把获取可用的base64地址的方法放在computed 里面是非常必要的。如果放在methods里面初次进入这个页面时候会报错(除了首页之外)。这里就是跟methods和computed特性有关。

原文地址:https://blog.csdn.net/qq_43468165/article/details/129163508

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇 2023年06月28日 08:25
微信小程序个人中心页面 案例
下一篇 2023年06月28日 08:25