微信小程序背景图片真机不显示问题

最新推荐文章于 2025-04-17 16:13:30 发布

红叶落水

最新推荐文章于 2025-04-17 16:13:30 发布

阅读量5.9k

点赞数 2

分类专栏：微信方法备份文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/m0_59140170/article/details/123062965

版权

微信方法备份专栏收录该内容

2 篇文章

订阅专栏

在微信小程序中，开发者遇到真机预览时view组件的背景图片无法显示的问题。解决方案包括：1) 使用http开头的图片路径或者将图片转存至微信云端；2) 将图片转化为Base64格式并设置给view的背景；3) 使用image组件代替view加载图片。经测试，安卓设备表现良好，但苹果设备可能仍有显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

开发者工具上<view style="background-image: url(图片路径);"></view>可以正常显示

但是真机预览，不显示。

解决方式：

1.图片路径以http开头时，可以显示。所以，可以将图片放到微信云端，直接引用云id;

没钱的话，把多张图片放到一个压缩包里，压缩包放到云端储存；然后下载下来，保存到本地，再从本地引用即可；（实测，安卓没啥问题，苹果还是不显示）

2.将图片路径转化为Base64格式

 
    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>

3.使用image


<view style="">
<image style="position: absolute;width: 100%;height: 100%;" src=""></image>
</view>