微信小程序wxss的background本地图片问题
在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本地图片问题的更多相关文章
- 微信小程序----wxss设置样式
一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...
- 微信小程序wxss设置样式
微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...
- 微信小程序wxss样式详解
一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...
- 前端笔记之微信小程序(一)初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR
一.小程序概述 2017 年 1 月 9 日小程序正式上线,腾讯开放了个人开发者开发小程序,小程序从此就开始火爆,这一年,小程序狂揽 4 亿用户.1.7 亿的日常活跃,上线 58 万个.这是一个巨大的 ...
- 微信小程序通过background-image设置背景图片
微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong ...
- [转]微信小程序开发(二)图片上传+服务端接收
本文转自:http://blog.csdn.net/sk719887916/article/details/54312573 文/YXJ 地址:http://blog.csdn.net/sk71988 ...
- 微信小程序-WXSS
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. WXSS 用来决定 WXML 的组件应该怎么显示. 为了适应广大的前端开发者,我们的 WXSS 具有 ...
- less文件编译成微信小程序wxss文件
2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜.在做demo小示例的过 ...
- 微信小程序のwxss
一.wxss简介 wxss是微信小程序的样式文件,同h5框架的css类似,它具有以下特性: 二.外联样式导入 我们可以通过@import引入外部文件的样式 小程序样式是从上到下,从左到右执行的,如果样 ...
随机推荐
- django----对model查询扩展
基于对象关联查询 一对多查询(Book--Publish): 正向查询,按字段: (从关联的表中查询) book_obj.publish : 与这本书关联的出版社对象 book_obj.publish ...
- bzoj 2142
数论大集合 只要你做完了这道题,除了线性筛和降幂公式以外,所有数论noip知识点就都会了... 题意:求C(n,∑w)*C(∑w,w1)*C(∑w-w1,w2).....mod p(不保证p为质数) ...
- myBatis各种依赖包
下载地址:myBatis各种依赖包
- 开发同学的福利--mysql监控工具sqlprofiler,类似sqlserver的profiler工具
最近无意发现了mysql的客户端监控工具“Nero Profile SQL”,刚开始还不知道怎么使用,经过半小时摸索,现将使用步骤写下来. 背景:开发的时候,如果数据存储层这块使用EF,或者其他orm ...
- Arbitrage HDU1217
汇率转换问题: 怎么样才能套利 可以用Floyd算法: #include<bits/stdc++.h> using namespace std; ][]; int main() { int ...
- 基于Java的REST架构风格及接口安全性设计的讨论
1.REST即表现层状态传递(Representational [,rɛprɪzɛn'teʃnl] State Transfer,简称REST). (1)REST名词解释: 通俗来讲就是资源在网络中以 ...
- C#并行编程(1):理解并行
什么是并行 并行是指两个或者多个事件在同一时刻发生. 在程序运行中,并行指多个CPU核心同时执行不同的任务:对于单核心CPU,严格来说是没有程序并行的.并行是为了提高任务执行效率,更快的获取结果. 与 ...
- Node.js之图片上传
本文用node进行图片上传主要借助formidable插件,具体使用步骤如下: 1.安装formidable插件 npm install formidable -g 2.引入依赖包 const for ...
- 三篇文章带你极速入门php(二)之迅速搭建php环境
前言 今天讲一下php在windows,mac,linux上的集成环境搭建,目标是简单快速,环境这个事得对号入座,windows用phpstudy,mac用mamp,linux用lnmp一键安装,直接 ...
- 4923: [Lydsy1706月赛]K小值查询 平衡树 非旋转Treap
国际惯例的题面:这种维护排序序列,严格大于的进行操作的题都很套路......我们按照[0,k],(k,2k],(2k,inf)分类讨论一下就好.显然第一个区间的不会变化,第二个区间的会被平移进第一个区 ...