在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. nginx部署网站

    部署单个网站非常简单,只要将网站HTML文件和资源文件(.jpg .css .js等)全部复制到nginx-1.13.12\html目录下. 然后启动 启动进入cmd,切换到nginx-1.13.12 ...

  2. HDU 1075 字符串映射(map)

    Sample InputSTARTfrom fiwohello difhmars riwosfearth fnnvklike fiiwjENDSTARTdifh, i'm fiwo riwosf.i ...

  3. MockMvc 对 Spring Boot 进行单元测试

    import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.ann ...

  4. 解决Linux下Qt编译出现"cannot find -lGL"以及无法安装libgl1-mesa-dev的问题

    在Linux系统下安装好Qt5,打开Qt Creator新建一个最简单的工程,编译却出现"cannot find -lGL"错误. 在网上搜索解决方法,找到的方案基本上是安装lib ...

  5. Codeforces 160D Edges in MST tarjan找桥

    Edges in MST 在用克鲁斯卡尔求MST的时候, 每个权值的边分为一类, 然后将每类的图建出来, 那些桥就是必须有的, 不是桥就不是必须有. #include<bits/stdc++.h ...

  6. SqlServer 添加用户 添加角色 分配权限

    转载自:https://www.cnblogs.com/accumulater/p/6158387.html   --创建一个简单的登录,登录名为:newlogin:登录密码:123456:默认数据库 ...

  7. win10 更新之后,无法开启wifi,“组或资源的状态不是执行请求操作的正确状态”

    netsh wlan netsh wlan start hostednetwork 请参考最新博客:http://www.cnblogs.com/tanrong/p/8184325.html 已尝试解 ...

  8. Unity 之 场景切换

      Application.LoadLevel();//场景名称或索引,删除掉原场景的所有东西 Application.LoadLevelAdditive()//添加并加载场景,不删除当前场景的物体, ...

  9. git合并冲突解决方法

    1.git merge冲突了,根据提示找到冲突的文件,解决冲突 如果文件有冲突,那么会有类似的标记 2.修改完之后,执行git add 冲突文件名 3.git commit 注意:没有-m选项 进去类 ...

  10. C++ 对Ctrl+Z的解释

    只有当Ctrl+Z单独位于一行的行首时,才表示输入的终止!(即无论何时,都推荐先回车,再Ctrl+Z,再回车结束输入) 当Ctrl+Z位于行中.行末时,输入都不会结束. (Ctrl+Z表示一个字符,其 ...