热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序之解决backgroundimage属性失效

在做微信小程序时,当遇到需要给某个组件加背景图片时,通常是使用background-image这个属性。在以往的网页程序中,直接在这个属性

在做微信小程序时,当遇到需要给某个组件加背景图片时,通常是使用 background-image 这个属性。在以往的网页程序中,直接在这个属性后面加上相对路径或绝对路径,便可以将背景图片显示出来。但是,在微信小程序中却不可以,如果直接设置相对路径或者绝对路径,那么在微信开发者工具中的模拟器确实可以显示出来,但是一到了真机进行调试,却会发现这个属性失效了。目前有两种解决办法:

第一种:将图片路径设置成网络图片地址,需要架设服务器。

第二种:将整张图片转成base64编码的数据,可使用这个在线转换工具进行转换(https://tool.css-js.com/base64.html)。

代码示例:

background-image: url("data:image/png;base64,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")


推荐阅读
  • centos 7.0 lnmp成功安装过程(很乱)
    下载nginx[rootlocalhostsrc]#wgethttp:nginx.orgdownloadnginx-1.7.9.tar.gz--2015-01-2412:55:2 ... [详细]
  • Cookie学习小结
    Cookie学习小结 ... [详细]
  • 服务器部署中的安全策略实践与优化
    服务器部署中的安全策略实践与优化 ... [详细]
  • 在 CentOS 6.5 系统上部署 VNC 服务器的详细步骤与配置指南
    在 CentOS 6.5 系统上部署 VNC 服务器时,首先需要确认 VNC 服务是否已安装。通常情况下,VNC 服务默认未安装。可以通过运行特定的查询命令来检查其安装状态。如果查询结果为空,则表明 VNC 服务尚未安装,需进行手动安装。此外,建议在安装前确保系统的软件包管理器已更新至最新版本,以避免兼容性问题。 ... [详细]
  • 本文详细介绍了 Java 网站开发的相关资源和步骤,包括常用网站、开发环境和框架选择。 ... [详细]
  • 小程序的授权和登陆
    小程序的授权和登陆 ... [详细]
  • 本文介绍了Java编程语言的基础知识,包括其历史背景、主要特性以及如何安装和配置JDK。此外,还详细讲解了如何编写和运行第一个Java程序,并简要介绍了Eclipse集成开发环境的安装和使用。 ... [详细]
  • 本文详细介绍了Java代码分层的基本概念和常见分层模式,特别是MVC模式。同时探讨了不同项目需求下的分层策略,帮助读者更好地理解和应用Java分层思想。 ... [详细]
  • 本文介绍了如何利用HTTP隧道技术在受限网络环境中绕过IDS和防火墙等安全设备,实现RDP端口的暴力破解攻击。文章详细描述了部署过程、攻击实施及流量分析,旨在提升网络安全意识。 ... [详细]
  • CentOS 7 中 iptables 过滤表实例与 NAT 表应用详解
    在 CentOS 7 系统中,iptables 的过滤表和 NAT 表具有重要的应用价值。本文通过具体实例详细介绍了如何配置 iptables 的过滤表,包括编写脚本文件 `/usr/local/sbin/iptables.sh`,并使用 `iptables -F` 清空现有规则。此外,还深入探讨了 NAT 表的配置方法,帮助读者更好地理解和应用这些网络防火墙技术。 ... [详细]
  • 浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ... [详细]
  • Vim 编辑器功能强大,但其默认的配色方案往往不尽如人意,尤其是注释颜色为蓝色时,对眼睛极为不友好。为了提升编程体验,自定义配色方案显得尤为重要。通过合理调整颜色,不仅可以减轻视觉疲劳,还能显著提高编码效率和兴趣。 ... [详细]
  • 本指南介绍了如何在ASP.NET Web应用程序中利用C#和JavaScript实现基于指纹识别的登录系统。通过集成指纹识别技术,用户无需输入传统的登录ID即可完成身份验证,从而提升用户体验和安全性。我们将详细探讨如何配置和部署这一功能,确保系统的稳定性和可靠性。 ... [详细]
  • 本文详细介绍了在CentOS 6.5 64位系统上使用阿里云ECS服务器搭建LAMP环境的具体步骤。首先,通过PuTTY工具实现远程连接至服务器。接着,检查当前系统的磁盘空间使用情况,确保有足够的空间进行后续操作,可使用 `df` 命令进行查看。此外,文章还涵盖了安装和配置Apache、MySQL和PHP的相关步骤,以及常见问题的解决方法,帮助用户顺利完成LAMP环境的搭建。 ... [详细]
  • 本文整理了一份基础的嵌入式Linux工程师笔试题,涵盖填空题、编程题和简答题,旨在帮助考生更好地准备考试。 ... [详细]
author-avatar
陈大也也_384
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有