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

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

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

代码示例:

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAK1ElEQVR4Xu2dfYwcZR3Hv7/ZnVmIW4PttbVgjZYW2oDa6tmbLcVaayPBgiU09SWCGsDr7eKBiAoJiUeiFgOmtHb37lJQkmrUKkh5C1r6Ipbe3HGAMSUtvdqgVLDt0Wp6GHZmZ35md3u11HZ33nd29rm/Nrnn+b18P/PMPvM8v32GIP5irQDFOjuRHATgmF8EArAAHHMFYp6eGMECcMwViHl6sRrBnN+dNmjsYmaeKRHNsICJBE4DlGYgXf0MMGiMgDGAx8qfJeCoxXyAGCMyTdhHuUvH4sK9aQHzgzsnmMXEQhPSImLOgHg2QFP8AcOHwbSXiQYkph3JpPQsdbb/xx/b4VppGsAngC62gEUALQJ4LkCJUORiLgH0AhPtSMD6YyJl7qQbFh4PxbdHJ5EHzP3Dsm6ay4m5C4TFHvP1q/s2idGbSCY3U2e74ZfRIOxEFjDnh6brZH0djBuJ8N4gkvdqkxn/BLBBgbSBcvNf82oviP6RA6z3DbbD5NtAWAFADiLpAGwaAP8GkrRGWdUxHIB91yYjAbhyGy6ZKwh8CwgdrrOJQkfGIEu4X5GSD0fh9t1wwNw/3GaYxlqAvhQFPr7FwPwLOSnfSp3to77ZdGGoYYCZmYzeoesBvg9Am4vYm6HLKAi3KV3qxkYF2xDAnN810yDppwAub1TiYfplxh8UWDnKLdgfpt+yr9ABG33aUjaxEYSpYSfbUH+MQyTxtXJX5rkw4wgNMG/ihD46uJqA2xtxYYUp6tl9sUlMdycnd/yQVpIZRkyhAOZ12vuMBH4JwsIwkoq8D8ZO2cQXqVs9GHSsgQPmdS9ONhLFrSD6UNDJNJl9TS4pV1P3R48EGXeggMsjV0/wdiKaGWQSzWqbgRGFpSVBroIFBpj7hy/UzdJ2AqY3K4Aw4mbw3xXmJUHNsAMBzP3D03SztJOAGWGI1Ow+GPxXJSFfTp3tb/idi++AK5vuGNNAuMTvYONtj3fLPCHjd7GBr4B53UjKSL75NIBPxhtGYNltk0uTrqTuWUW/PPgGuLz0qPdqjxFomV/BtaIdBh5TujqWExH7kb9vgPWCdiuANX4EJWzgm0pWvd8PHXwBbBSGFjGsLU20f+uHdkHaMCDRAj/2lj0D5t7nphhW4i8tt7YcJN5K5SdeVRLJudTZ/m8vrjwBrm75DW4TkyovCGqsXDM2K9mOa7x8H3sCrOcHvgqinwWTnrBaUYD5a0ou85BbNVwD5gd2TTSK0j4QJrl1LvrZUmBU5vQH3T4fuwasFwYeAugrtkIUjbwpwFir5NTyU4rjP1eAT8yadzj2Jjq4VIBNgDqUrPqCUwOuABcL2tMEfMapM9HevQIM/D6VVa9wasExYL33+Xlgs3wlOe7rNDjR/h0KMCSa7/TZ2DEkvaD9CsDnhfgNUeDXSlb9ghPPjgBXqiFBe0CUdOJEtPVJAeaSzNIldHPHPrsWHQHW81ofCJ12jYt2ASjA6Fdy6iq7lm0D5p7tSWPyOa+DaLJd46JdEArwYfnw2xdQz+KSHeu2AZcKg8st8O/sGBVtglVAAl2TzHY8aseLbcDFvPYoET5nx6hoE6wCzNicyqnL7XixBbj6A7HS62I70I6kobQx5JJygZ2SW1uAxWZ+KNCcOrFVFGALsLg9O9U++PZ2b9O2AOt57RgI5wUftvBgXwE+KnepbfX2iusC1guaCmDAvmPRMjQFWJqn5Ob/uZa/uoCL+YEeIvpeaEELR7YVIMadck69xxvgwsDjohTWtuahNmTwE6ls5iqPgLW9BFwcauTCmS0FGHgllVVnuwbMPSwZUzQ9tBPlbKUlGv1PATblw6pCPWSdTZWa38HcPzzbMEt7hKTRVUBOJOdQZ/teV4DF+nN0wY5HVm9duuYINvLa7Uy4N/pptnSENVe0agIuFgbvIfB3W1q+iCfPoB+lsh13uLpF63ntfhBuiXiOrR1enZLamiNYVHA0wbVTp8KjNmBRYNcEhFGzEK/Od7Cof4464Xr10gJw1AnWic8TYFED3RT03d+ixSSrCQB7mmSJx6TIE/b0HCwWOiLPF8x8dyqX6XG10CGWKqMPGKh9Ik/NWbTYbIg+YE+bDWK7MPqAPW0Xig3/qAP2uOFfTq9YECU7UcXsuWSnClgU3UUWMPMjqVzm2lrx1S2bNfLaHUxYHdUkWzkuX8pm9fzQXJD1UisLGdnc/Sh8rx5XqI0CNDGyibZiYIx/KTn1PfVSr3uLrnwPi98G19Mx9P/7++OzwsA3AFoXehbCYQ0FuFvJZn5STyJbI7jy7qOk/g/xA/B6cob2f0NOJM+382ZTW4DFbTo0cLYc2b09l43ZBizWpW1pH0qjeuvPpwZhG/CJY5SOgSgdShbCyZkVYD4iH3n7fN+PUSp7ExUeEbjqHB4tbHsEl1Pj9YMXGWS9LI4ybBDo8lGG4DlOXoPnCHBlFIta6QbRrbgN9jDSCuC+wXZYPORkgtZIRWLkm0GJjyldH3e0bOx4BFcemcSB4KFfN/Xqn88WkCvAxvrBDEu8K/QsW9thRsmqmlMJXAEWM2qnMnts73Dm7Oo5+PQQef3gJEPi8tEBbR7DF91rKMCMg8qEc2fT9R95y41QrkdwdRSLF2O5Ed1JHyerVmey6wlw9bFpYAtAn3YStGhrTwEGnkxlVU+v6/UMuPxySp0TgwR8wF7YopUdBZj5b4pkzaeuyw7bae/rLPp0YyeejcuzatlLMKLvSQUMWKwqN2de9KqJ5xE8HoA4U9orinf0t3UWtB2PvgEuOysWtN8SULOM005QrdyGgYdTWXWFXxr4CpjXjaSM5JtPAfiUXwG2mJ0dcmnSFdQ9q+hX3r4CLgfF+d1pg44PAHSpX0G2hB3GyzLSqtvXyAY6yTrdOPcPT9NN408EurAl4HhMkoEDSiK5kDrb3/Bo6v+6+z6Cxz1wnzZLt/gZAr3f76DjZI+B1xQJS2iVOhJEXoEBrt6uh6brZG0lYFYQwTe7TWber5i0mLrVg0HlEijgCuRqye0zAD4cVBLNaZeH5FJqmZ13H3nJL3DAFchrXjrPUIqbQfiEl2Bj05fxrDzh3CvdbiA40SEUwBXImzihjw79gMDfaeFqEGbgPqWt405aSaYTUG7bhgZ4PECjT1vKJjaCMNVt0E3Zj3GIErhOXqVuCTP+0AFXRvMGbaqhVyAvDTPZhvlibJEVXEc3qYfCjqEhgMeTLP9awgT/mIAZYScehr/y822C+dvJXOaRMPydyUdDAVdn2SOpUvJoNzPfBcK7GyWEv375ODG+nzTb1vq57OgmxoYDHg+6vK9ssHQXgJsAOsdNMg3vw3iLCb0Kmfd63cf1K5fIAD4JeoM2VTfwLWJkQXiXX4kGamccrGKtphsXHA3Ul0PjkQN8EvQDuyaWdMpaoBuiWi3CwKsS+MGkwoWogR3XMbKAT71Qjd6By5jxZQArG39WCB8D0yYCfi7n1J0OB1TozZsC8KmqlPIDV1mEqxn0WQKmhaFYeUOAwE9KjKeSuczjYfj0y0fTAT41cb33+XlkmcuYeAmAOQBN8UcYLhe67SGmrSwlnnD6eyB/YvDHSlMDPl2CSrEBH7+ICbMkohkWMJHAaYDSDKSrnwEGjREwBvBY+bMEHLWYDxDRfpnTr/i96e4PKndWYgXYnQTx7iUAx5uv/UNYYq5DbNMTIzi2aKuJCcACcMwViHl6YgTHHPB/AXVdwqYkikTgAAAAAElFTkSuQmCC")

微信小程序之解决background-image属性失效相关推荐

  1. 关于微信小程序textarea中的maxlength属性失效问题

    关于微信小程序textarea中的maxlength属性失效问题 代码菜鸡今天在编写小程序前端代码时,遇到了一个问题:textarea输入140个字以后,就再也输不进去了,想着设置一下maxlengt ...

  2. uniapp 微信小程序开发 解决旧版本缓存

    1.uniapp 微信小程序如何解决旧版本缓存问题 在小程序发布新版本后,小程序端是异步更新,新版本覆盖较慢.如果用户之前已经打开过小程序,通过 热启动 再进入小程序时,可能访问的还是旧版本,需要一段 ...

  3. 微信小程序的如何使用全局属性 —— 微信小程序教程系列(5)

    微信小程序提供了app.js文件,用于放置一些全局的函数和全局的属性. 一般情况下,我都会把一些常用的函数和属性写在app.js文件内,这样不用在页面之间传值,或者不用重复加载. 下面以全局属性为例 ...

  4. 微信小程序如何解决社区团购的痛点

    首先我们先来了解一下,什么是社区团购.社区团购是以小区为单位,以微信为载体整合多个社区社群资源,为社区居民提供日常所需商品.生活服务,集中化管理运营的一种商业模式.那么社区团购的优势.痛点都是什么呢? ...

  5. 微信小程序富文本渲染(rich-text)换行失效

    微信小程序富文本渲染(rich-text)换行失效 给rich-text标签加css 样式 white-space: pre;

  6. 微信小程序 wxss之 background 属性

    1. backgroundcolor <view class="teststycleone">这是一个测试</view> .teststycleone{ w ...

  7. 微信小程序实战篇:商品属性联动选择(案例)

    本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...

  8. 微信小程序 自动解决分包大小问题_2020微信小程序前端面试题汇总

    [持续更新,欢迎补充] 1.文件类型 WXML--模板文件 JSON--配置/设置文件,如标题,tabbar,页面注册 WXSS--样式文件,样式可直接用import导入 JS--脚本逻辑文件,逻辑处 ...

  9. 人工智能微信小程序人脸识别之人脸属性检测(附源码)

    随着人工智能和大数据分析技术越来越广泛,众多的生活场景都存在着这些技术的身影,比如像现在比较流行的人脸识别技术,其底层的算法实现的支撑,为众多的业务场景铺垫了基础,像支付宝的刷脸支付,本文是百度的人脸 ...

最新文章

  1. 统计用户在某一页停留的时间
  2. 三年0故障是如何做到的?
  3. VTK:相互作用之StyleSwitch
  4. css小技巧 ----- 使用border制作一个小三角形图标
  5. android 绘图流程,Android View绘制流程
  6. 第26周维生素市场最新动态
  7. vant实现三级联动
  8. Springboot实现filter拦截token验证和跨域
  9. Android Q共享音频输入
  10. linux网络编程之:UDP数据包格式
  11. JAVA 守护线程 Deamon
  12. android是乐视手机刷机,乐视 X620(乐2 全网通)刷机教程,简单刷机
  13. 哪些数学特征可以用来描述一组数据
  14. 二叉树的非递归遍历详解
  15. python信息采集管理系统_基于Python的求职信息采集分析系统设计与实现
  16. c++生成so调用LOGI
  17. 用fluent模拟内循环床气化燃烧(调试过程记录)
  18. Python爬虫入门教程 63-100 Python字体反爬之一,没办法,这个必须写,反爬第3篇...
  19. 时间序列分析中resample函数
  20. FlaskWeb开发从入门到放弃(二)

热门文章

  1. 2019,我的工作寻找之路
  2. 【转】关于“手动重新生成注册表性能计数器”的问题
  3. 电脑重启bootmgr_电脑出现bootmgr is missing怎么办
  4. 2021年12月电子学会图形化三级编程题解析含答案:数星星
  5. 著作权范围大于版权?如何进行著作权查询?
  6. 理解Aho-Corasick自动机算法
  7. 关于图片转base64的加密解密
  8. 使用python将任意张图片拼接成多张大图
  9. 玩转AgiileCDN(十三)——全站加速
  10. 2021-01-3 VBA利用企业邮箱自动发送邮件