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

最新推荐文章于 2024-07-06 17:39:54 发布

小胖砸~

最新推荐文章于 2024-07-06 17:39:54 发布

阅读量2.6k

点赞数 1

分类专栏： uniapp 文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_43468165/article/details/129163508

版权

uniapp 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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

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特性有关。