在web 或者webapp开发中我们习惯了直接饮用本地图片做背景,例如

.aaa {
background: url('img/1.png');
}

但是这种引用方式在微信小程序中是无法使用的,控制台会显示如下

不允许使用本地路径。

于是我将路径替换为非本地路径试试:

.u-img-leftIcon {
background: url('http://192.168.31.163:8020/pr/source/img/searchLeft.png') no-repeat;
background-size: contain;
display: inline-block;
width: 40rpx;
height: 40rpx;
}

此时,图片正产显示。但是开发的时候如果没有图片服务器咋办?

可以使用base64方式引用图片

.u-img-leftIcon {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAgCAYAAABgrToAAAAAAXNSR0IArs4c6QAAAHlJREFUWAnt2LEJwDAMRFE5c2ShLOKhsp69h3ISeAI1CnyBiJvA8dwcHu7+mNmrvbWdZivMHAq4dOgW7kDt65y6fiPg1AZnt8kr7haKPAgggAACfxOIskCbKdwabaaAlw0rmhaDAAIIIIBAQYA2U8CLX2kzFcB8m/kAgGUmQShl8pcAAAAASUVORK5CYII=) no-repeat;
background-size: contain;
display: inline-block;
width: 40rpx;
height: 40rpx;
}

这样就是把图片转换成了一串base64编码来调用。而编码转换网址,如下:
http://imgbase64.duoshitong.com/

转换出的代码直接复制到url的括号中即可

微信小程序wxss的background本地图片问题的更多相关文章

  1. 微信小程序----wxss设置样式

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  2. 微信小程序wxss设置样式

    微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...

  3. 微信小程序wxss样式详解

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  4. 前端笔记之微信小程序(一)初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR

    一.小程序概述 2017 年 1 月 9 日小程序正式上线,腾讯开放了个人开发者开发小程序,小程序从此就开始火爆,这一年,小程序狂揽 4 亿用户.1.7 亿的日常活跃,上线 58 万个.这是一个巨大的 ...

  5. 微信小程序通过background-image设置背景图片

    微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong ...

  6. [转]微信小程序开发(二)图片上传+服务端接收

    本文转自:http://blog.csdn.net/sk719887916/article/details/54312573 文/YXJ 地址:http://blog.csdn.net/sk71988 ...

  7. 微信小程序-WXSS

    WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. WXSS 用来决定 WXML 的组件应该怎么显示. 为了适应广大的前端开发者,我们的 WXSS 具有 ...

  8. less文件编译成微信小程序wxss文件

    2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜.在做demo小示例的过 ...

  9. 微信小程序のwxss

    一.wxss简介 wxss是微信小程序的样式文件,同h5框架的css类似,它具有以下特性: 二.外联样式导入 我们可以通过@import引入外部文件的样式 小程序样式是从上到下,从左到右执行的,如果样 ...

随机推荐

  1. laravel 集合

    最近一直在用laravel框架,比较喜欢laravel的ORM(通常我们理解的Model)...但是默认情况下,Eloquent 查询的结果总是返回 Collection 实例...所有不得不了解co ...

  2. hdu1024线性dp

    /* dp[i][j]表示取第i个数时分成了j块 要么是将第i个数加入j块中的最后一块,要么是自成一块,加上前面j-1块的和 状态转移方程: dp[i][j]=max(dp[i-1][j]+a[i], ...

  3. python 全栈开发,Day107(CRM初始,权限组件之权限控制,权限系统表设计)

    一.CRM初始 CRM,客户关系管理系统(Customer Relationship Management).企业用CRM技术来管理与客户之间的关系,以求提升企业成功的管理方式,其目的是协助企业管理销 ...

  4. C/S权限系统(一)

    父窗体的代码: 扩展Enter键相当于Tab键的思路: 1.创建 窗体的父类2.在父类中重写Form中的ProcessCmdKey方法,在相关控件上按回车键相当于按了Tab 键3.让窗体继承新建的窗体 ...

  5. 【C++ Primer | 06】 函数

    contexpr函数 const用于运行期常量,constexpr用于编译期常量 • [test1.cpp] #include <iostream> using namespace std ...

  6. Codeforces Round #428 (Div. 2)

    终于上蓝名了,hahahahaha,虽然这场的 B 题因为脑抽了,少考虑一种情况终判错了,还是很可惜的.. B题本来过来1500个人,终判之后只剩下了200多个,真的有毒!!!! A - Arya a ...

  7. HDU3306 Another kind of Fibonacci 矩阵

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - HDU3306 题意概括 A0=1,A1=1,AN=X*AN-1+Y*AN-2(N>=2).求SN,SN ...

  8. 003.HAProxy ACL规则的智能负载均衡

    一 简介 HAProxy可以工作在第七层模型,可通过ACL规则实现基于HAProxy的智能负载均衡系统,HAProxy通过ACL规则完成以下两种主要功能: 通过ACL规则检查客户端请求是否合法,如果符 ...

  9. BZOJ.2208.[JSOI2010]连通数(bitset Tarjan 拓扑)

    题目链接 先缩点,对于scc之间贡献即为szscc[i]*szscc[j] 用f[i][j]表示scci是否能到sccj 拓扑排序,每次把now的f或上to的f 用bitset优化 //63888kb ...

  10. POJ.1769.Minimizing maximizer(线段树 DP)

    题目链接 /* 题意:有m个区间,问最少要多少个区间能覆盖[1,n] 注:区间要按原区间的顺序,不能用排序贪心做 设dp[i]表示最右端端点为i时的最小值 dp[e[i]]=min{dp[s[i]]~ ...