微信小程序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引入外部文件的样式 小程序样式是从上到下,从左到右执行的,如果样 ...
随机推荐
- window 命令大全
运行操作 CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本) CMD命令锦集 1. gpedit.msc-----组策略 2. ...
- 性能测试二十八:环境部署之Dubbo部署
Zookeeper部署 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一 ...
- 步步为营-57-JQuery练习题
01 点谁谁哭 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- 2017-2018-2 20155225《网络对抗技术》实验九 Web安全基础
2017-2018-2 20155225<网络对抗技术>实验九 Web安全基础 WebGoat 1.String SQL Injection 题目是想办法得到数据库所有人的信用卡号,用Sm ...
- spring + quartz定时任务,以及修改定时任务
spring4+quartz2.2.3,定时任务弄好了,修改定时任务没折腾起,没找到合适的解决方案. 最终使用库spring-context-support 3.2.17.RELEASE + qua ...
- extern "C" 回顾
引入:在测试"extern "C" 与gcc, g++无关"时,使用到了extern "C"的概念,网上找篇文章回顾一下. 试验如下: te ...
- poj 1321 棋盘问题(n行中放任意k行)
n*n的棋盘摆K的棋子,任意两个棋子不能在同一行同一列 Sample Input 2 1#. //# 可放.#4 4...#..#..#..#...-1 -1Sample Output 21 # i ...
- A. 【UR #16】破坏发射台
题解: 首先看n是偶数的 那么就是不需要满足对面这个性质的 这样就可以dp了 f[i][0/1]表示dp到第i位,当前数等于或不等于第一位的方案数 然后显然可以用矩阵优化 再考虑n为奇数 用一样的思路 ...
- 【Java】 剑指offer(50-2) 字符流中第一个只出现一次的字符
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字 ...
- POJ 2409 Let it Bead【Polya定理】(模板题)
<题目链接> 题目大意:用k种颜色对n个珠子构成的环上色,旋转.翻转后相同的只算一种,求不等价的着色方案数. 解题分析: 对于这种等价计数问题,可以用polay定理来解决,本题是一道pol ...