热门标签 | 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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")


推荐阅读
  • Linux服务器密码过期策略、登录次数限制、私钥登录等配置方法
    本文介绍了在Linux服务器上进行密码过期策略、登录次数限制、私钥登录等配置的方法。通过修改配置文件中的参数,可以设置密码的有效期、最小间隔时间、最小长度,并在密码过期前进行提示。同时还介绍了如何进行公钥登录和修改默认账户用户名的操作。详细步骤和注意事项可参考本文内容。 ... [详细]
  • Centos7.6安装Gitlab教程及注意事项
    本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]
  • 利用Visual Basic开发SAP接口程序初探的方法与原理
    本文介绍了利用Visual Basic开发SAP接口程序的方法与原理,以及SAP R/3系统的特点和二次开发平台ABAP的使用。通过程序接口自动读取SAP R/3的数据表或视图,在外部进行处理和利用水晶报表等工具生成符合中国人习惯的报表样式。具体介绍了RFC调用的原理和模型,并强调本文主要不讨论SAP R/3函数的开发,而是针对使用SAP的公司的非ABAP开发人员提供了初步的接口程序开发指导。 ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • 安装mysqlclient失败解决办法
    本文介绍了在MAC系统中,使用django使用mysql数据库报错的解决办法。通过源码安装mysqlclient或将mysql_config添加到系统环境变量中,可以解决安装mysqlclient失败的问题。同时,还介绍了查看mysql安装路径和使配置文件生效的方法。 ... [详细]
  • 20211101CleverTap参与度和分析工具功能平台学习/实践
    1.应用场景主要用于学习CleverTap的使用,该平台主要用于客户保留与参与平台.为客户提供价值.这里接触到的原因,是目前公司用到该平台的服务~2.学习操作 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 图解redis的持久化存储机制RDB和AOF的原理和优缺点
    本文通过图解的方式介绍了redis的持久化存储机制RDB和AOF的原理和优缺点。RDB是将redis内存中的数据保存为快照文件,恢复速度较快但不支持拉链式快照。AOF是将操作日志保存到磁盘,实时存储数据但恢复速度较慢。文章详细分析了两种机制的优缺点,帮助读者更好地理解redis的持久化存储策略。 ... [详细]
  • 本文介绍了在mac环境下使用nginx配置nodejs代理服务器的步骤,包括安装nginx、创建目录和文件、配置代理的域名和日志记录等。 ... [详细]
  • mac php错误日志配置方法及错误级别修改
    本文介绍了在mac环境下配置php错误日志的方法,包括修改php.ini文件和httpd.conf文件的操作步骤。同时还介绍了如何修改错误级别,以及相应的错误级别参考链接。 ... [详细]
  • 本文详细介绍了在Centos7上部署安装zabbix5.0的步骤和注意事项,包括准备工作、获取所需的yum源、关闭防火墙和SELINUX等。提供了一步一步的操作指南,帮助读者顺利完成安装过程。 ... [详细]
  • GSIOpenSSH PAM_USER 安全绕过漏洞
    漏洞名称:GSI-OpenSSHPAM_USER安全绕过漏洞CNNVD编号:CNNVD-201304-097发布时间:2013-04-09 ... [详细]
  • Python项目实战10.2:MySQL读写分离性能优化
    本文介绍了在Python项目实战中进行MySQL读写分离的性能优化,包括主从同步的配置和Django实现,以及在两台centos 7系统上安装和配置MySQL的步骤。同时还介绍了创建从数据库的用户和权限的方法。摘要长度为176字。 ... [详细]
  • Annotation的大材小用
    为什么80%的码农都做不了架构师?最近在开发一些通用的excel数据导入的功能,由于涉及到导入的模块很多,所以开发了一个比较通用的e ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了markdown[软件代理设置]相关的知识,希望对你有一定的参考价值。 ... [详细]
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社区 版权所有