在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. python+selenium六:等待相关

    显式等待(sleep): 固定的等待(死等),不管页面有没有加载完,都等设置的时间过了再做下一步操作 隐式等待 全局生效,只写一次即可(仅当前页面),缺点:如果页面一直转圈,如:js出错将等待到所设置 ...

  2. linux下安装ruby环境

    安装步骤: ruby的shell叫irb,我们可以输入irb -v查看下irb的版本号 1.安装ruby解释器shell: yum install ruby-irb -y Installed: rub ...

  3. Codeforces Round #467 (Div. 2) E -Lock Puzzle

    Lock Puzzle 题目大意:给你两个字符串一个s,一个t,长度<=2000,要求你进行小于等于6100次的shift操作,将s变成t, shift(x)表示将字符串的最后x个字符翻转后放到 ...

  4. POJ3348 Cows 计算几何 凸包

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - POJ3348 题意概括 求凸包面积(答案÷50) 题解 凸包裸题. 代码 #include <cstr ...

  5. L3-016 二叉搜索树的结构 (30 分) 二叉树

    二叉搜索树或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值:若它的右子树不空,则右子树上所有结点的值均大于它的根结点的值:它的左.右子树也分别 ...

  6. python中的面相对象

    1.常用术语 2.创建类 empCount 变量是一个类变量,它的值将在这个类的所有实例之间共享.你可以在内部类或外部类使用 Employee.empCount 访问. 第一种方法__init__() ...

  7. Java Web 之javabeans

    Java遇见HTML——JSP篇之JavaBeans: http://www.cnblogs.com/Qian123/p/5277425.html

  8. 如何查看Ubuntu版本,以及Linux内核版本??

    查看Ubuntu版本: 方法一:   cat /etc/issue 方法二:   sudo lsb_release -a 查看内核版本: uname -r

  9. CI入门

    CI入门 一.[查]按条件获取一条记录 获取数据有返回数组形式或对象形式,row_array().result_array()是以数组形式返回:row().result()是以对象形式返回.同样的,更 ...

  10. mysql DISTINCT的用法

    http://justcoding.iteye.com/blog/2116837 SELECT count(*) FROM tablename:百万级别的数据也能很快返回结果,但是如果加了where条 ...