微信小程序> 解决小程序引入背景图片不显示的四种方法

解决小程序引入背景图片不显示的四种方法

浏览量:499 时间: 来源:叶子_o

小程序在样式文件里面直接通过 background引入本地背景图是不显示的。

.shop-cart-btn{   background: url("/images/goods_car01.png") no-repeat center 21rpx;  }

四种解决办法:

1.将路径改成可以直接访问的绝对路径

background: url("http://baidu.com/1.png");

2.直接用image标签代替样式背景图

mpvue写法:
img src="/static/image/goods_car01.png" alt="小程序"

原生小程序:
image src='../image/goods_car01.png'/image

3.直接在标签上写入样式

div class="header" style="background: url('../image/goods_car01.png')"/div

4.将图片转换为base64编码

关于base64编码

  1. 支持 PNG、GIF、JPG、BMP、ICO 格式。

  2. 将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方。

  3. 假定生成的代码为"data:image/jpeg;base64, …",那么你只需要全部复制,然后在插入图片的时候,地址填写这段代码即可。

  4. CSS中使用:
    background-image: url("data:image/png;base64,iVBORw0KGgo=...");

  5. HTML中使用:
    img src="data:image/png;base64,iVBORw0KGgo=..." /

  6. 将图片转换成base64编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片404错误。

参考链接:
http://imgbase64.duoshitong.com/
https://blog.csdn.net/love_fish_dream/article/details/84644438

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎