在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. RzPageControl Tab拖拽 移动

  2. (七)CXF添加拦截器

    今天开始讲下拦截器,前面大家学过servlet,struts2 都有拦截器概念,主要作用是做一些权限过滤,编码处理等: webservice也可以加上拦截器,我们可以给webservice请求加权限判 ...

  3. ubuntu 12.04 安装 openssh-server 失败,请问怎么该弄?

    $ sudo apt-get install openssh-server Reading package lists... Done Building dependency tree Reading ...

  4. Myeclipse启动不了的解决方法

    Myeclipse启动不了的解决方法    我们在开发过程中经常在加载大工程时由于项目很大,导致编译时间很长.或是其他原因导致进度条有时候一直在不停地跑,占用了大量内存,在无奈之下直接将进程kill掉 ...

  5. Java 和 C++ 的部分区别

    1. Java是解释型语言,所谓的解释型语言,就是源码会先经过一次编译,成为中间码,中间码再被解释器解释成机器码.对于Java而言,中间码就是字节码(.class),而解释器在JVM中内置了. 2. ...

  6. hdu 2066 多起点 多终点

    多起点 多终点 无向图 结点的个数要自己求 Sample Input6 2 3 //边数 起点数 终点数1 3 5 //u v w1 4 72 8 123 8 44 9 129 10 21 2 //起 ...

  7. mydate97时间控件的使用

    mydate97官网: http://www.my97.net/dp/index.asp 1:用法如下所示,首先下载一个这个东西: 链接:http://pan.baidu.com/s/1kVmIckv ...

  8. java -d

    DB_SERVER_URL="-Ddatasource.driver=oracle.jdbc.OracleDriver -Ddatasource.url=jdbc:oracle:thin:@ ...

  9. 既有e^x又有sinx或cosx的积分题的解法

    楼上三位,一致对e^x情有独钟,他们都是对的.通常,这类题既有e^x又有sinx或cosx的积分题,一般的解法是:1.选定e^x,或选定sinx.cosx,就得“从一而终”,用分部积分的方法计算,   ...

  10. spring的i o c简单回顾

    1.springIOC是一个创建对象的容器,他负责将我们需要的对象帮我们创建出来,创建时间是:当我们从上下文环境中读取此对象时就会帮我们创建,严格意义上来讲它是一种编程思想不是一种技术. 2.依赖注入 ...