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

问题描述：

开发者工具上<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>

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

微信小程序背景图真机显示不了
微信小程序在本地开发工具正常显示图片(包括背景图),在真机显示不了,常见的几种情况: 1.微信小程序背景图真机显示不了微信小程序如何设置背景图片? | 微信开放社区微信小程序设置背景图片不显示问题 ...
微信小程序showToast在真机中显示时间不可控制，显示时间短
现象: 使用uniapp开发微信小程序,使用showToast,设置duration来控制提示展现时长,发现在微信开发者工具正常,在真机中显示时间比较短,并且设置duration不生效. 原因: 排查 ...
微信小程序开发者工具真机调试和预览连接本地服务器
微信小程序开发者工具真机调试连接本地服务器网上参考了很多方法只有这个方法能解决本地服务器在微信开发者工具预览或者真机调试的连接,话不多说看图. 第一步 win+R,CMD输入ipconfig查看本地 ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
微信小程序背景图片设置和图片自适应宽高
微信小程序背景图片设置和图片自适应宽高我们在开发过程中经常需要对一些元素设置图片为背景图片. 网络图片: .ServiceCenter{width: 100vw;height: 40vw;margi ...
微信小程序在IOS真机时间显示NaN
微信小程序在苹果真机时间显示NaN IOS系统不支持2018-08-30这样的格式的时间进行格式化如果后端返回的数据格式是直接显示在界面没有问题如果要格式话就得用new Date(),模拟器没 ...
php 发送微信请求失败的原因,微信小程序模拟正常真机服务器请求出错
微信小程序中出现最多的一个问题,就是真机跟本地不同:我简单列举一些我发现的原因,给大家参考,大家也可以把自己发现的东西回复给我,给我参考: 本地看不到数据,就先让本地能看到数据,再看本帖.... 1: ...
微信小程序背景图片background无法在手机端显示问题解决方案
之前做过一个小程序项目,页面中有背景图片,使用web开发工具调试时候背景图片能正常显示,使用真机调试及发布线上版本的时候图片不显示,刚开始以为是图片显示路径问题,后面问啦度娘后才发现微信小程序不支持背 ...
【微信小程序】image真机无法加载网络图片
背景由于最近路边的停车位都被无情的创收铲掉了!今天把车停在了路边,可能是挡住了行人的路,被贴了个条,还留了个纸条--没有你的随车电话,我只能点电话举报你了.气的我牙痒痒! 只能回来自己撸一个挪车电话 ...

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

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

最新文章

热门文章