微信小程序 通过wxss进行设置 背景图报错

经查询,发现微信小程序中,将网络图片或base64图片设置为背景图片可正常显示,将本地图片设置为背景图片则不能显示,解决方法有三种,个人采用的是第三种方法。

1. 本地图片转换为base64格式

在线转格式

2.使用行内样式

 <view class="flex_view" bindtap="handleUpstream" style="background:url(../../../images/upstream_bg2.png);">

行内样式经验证,存在模拟器正常显示,真机无法正常显示的问题

3. image替换背景图片,定位实现背景图片效果

 <view class="flex_view" bindtap="handleUpstream"><image src="../../../images/upstream_bg0.png"  class="flex_bg"/>

模拟器,真机都可以显示

4. 可通过网络地址访问,以网络图片的形式访问,解决了背景图片显示的问题

微信小程序设置 本地图片为背景图相关推荐

  1. 微信小程序设置本地图片的背景,开发工具可以,手机端不显示

    let base64 = wx.getFileSystemManager().readFileSync('/images/videoCover.jpg', 'base64') this.setData ...

  2. Uni-app开发微信小程序使用本地图片做背景图

    Uni-app开发微信小程序使用本地图片做背景图 <view class="content" :style="{backgroundImage:'url(' + i ...

  3. 微信小程序之一本地图片处理--按屏幕尺寸插入图片

    个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧.微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的 ...

  4. 自从自己搭建了这套精选壁纸聊天背景的微信小程序,我的手机背景图再都没重复过

    前不久刚学习完如何使用hbuilder还有微信开发者工具的简单应用,借着对拥有自己搭台出来的小程序的渴望,在网上物色了很久,终于找到一套比较好用切可用的手机壁纸小程序. 先看看运行起来的样子吧 运行D ...

  5. 微信小程序使用本地图片在真机预览不显示的问题解决

    开发工具上本地图片可以显示,但是在真机上预览的时候不能显示 通常我们代码路径是代码是这样写的 <view class="logo"><image src=&quo ...

  6. 微信小程序设置背景图片

    经常为微信小程序设置颜色背景,突然发现一张好看的图片怎么把它设置为背景呢? 以下总结了三种方法: css中通过url获取网络图片 微信小程序中不能使用本地图片 background-image:url ...

  7. 微信小程序设置wxss背景图片

    微信小程序设置wxss背景图片目前只支持两种: 在线图片 如果有自己的服务器可以将图片放到自己的web服务器上: 或者参考这个通过qq相册或百度相册将本地图片变为网上图片通过qq相册或百度相册将本地图 ...

  8. 微信小程序设置背景图的几种方式

    微信小程序设置背景图的几种方式 原本在html中可以通过background-image来设置背景图片 .page {width: 100%;height: 100%;background-size: ...

  9. ready等方法 微信小程序_微信小程序设置图片固定比例

    小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈微信小程序设置图片固定比例 . 12月28日消息,微信官方日前发布消息称,为了让微信小程序相关成员在无线端更方便地管理微信小程序,将开发小程 ...

最新文章

  1. 局部敏感哈希(Locality sensitive hash) [3]—— 代码篇
  2. 我的网站搭建 (第十七天) celery 定时刷新缓存
  3. Python解释器和IPython
  4. block学习(一)
  5. vue-cli 3.0安装和使用
  6. MySQL启动很慢的原因
  7. 并查集入门三连:HDU1213 POJ1611 POJ2236
  8. java什么时候需要同步_JAVA中线程在什么时候需要同步和互斥
  9. 无心剑中译丁尼生《磨坊主千金》
  10. win7安装python3.6_Win7 64位下python3.6.5安装配置图文教程
  11. 迅雷Chrome插件引发的Uncaught ReferenceError: xl_chrome_menu is not defined
  12. 系统安全中主要风险有哪些,弱密码怎么解决?
  13. 01 基本句型 + 补语
  14. 3.c++计算字符串长度的函数
  15. 用友u8服务器修改ipv4,如何修改用友服务器ip地址
  16. 卡贴机变无锁教程_如何让“有锁”iPhone变“无锁”?“有锁”iPhone变“无锁”设置教程...
  17. windows安装Nessus
  18. STM32F103C8T6和STM32F103C6T6区别
  19. 怎样用office Word2003打开docx格式文档???
  20. 揭秘数字资产行业隐藏的17家国外机构大牛

热门文章

  1. 开放媒体联盟着手打造免费视频格式
  2. python爬去百度文库资料_python urllib爬取百度云连接的实例代码
  3. 三种Linux的清屏命令方法
  4. 数据分析——股票双均线策略分析
  5. 63-Linux如何解决僵死进程
  6. Python零基础速成班-第14讲-Python处理Excel和Word,使用openpyxl和docx包详解,图表入门
  7. NASA World Wind开源项目配置详解
  8. linux添加压缩文件tar,在linux中使用tar创建与解压文件
  9. 如何建设一个合格的企业网站
  10. 短信验证登录实现流程