微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签
微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签
一、问题
报错信息:
VM696:2 pages/user/user.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签
报错位置:
二、解决方案
将图片edite.png
转换为base64,地址 http://imgbase64.duoshitong.com/
,在这里把要使用的图片转换一把,然后将得到的字符放到background-image
属性值中:
图片转换为Base64:
重新编码:
.user_addr_item .addr_edit{
width:50rpx;
/**background:url(../../images/edit.png) no-repeat;*/
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAlCAYAAAAqXEs9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNWRhZjJhMi1mYWY0LTQ5ZDUtYTQ4Mi1jNDllMTI2OTFlNTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzJFM0IwN0I5MUZCMTFFNjk0QjFCQ0Q0RjI0RDM0RDIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzJFM0IwN0E5MUZCMTFFNjk0QjFCQ0Q0RjI0RDM0RDIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MTkxZTllMy1iNGM5LTRiN2UtYjg4OC01YzAyNzEyZjFiZTkiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDowYWM5YjM0YS1kMGRkLTExNzktYmY0NC1lMzdjZDU2MzM3MGEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz66h3RTAAAD2ElEQVR42qyYaUgVURTHX8+KNs1sX2j5oFZEG7SSZiGa2SK8SqKiskjKbKVAC4skv0RQ2SK2L5gVZrRRBobmF9ujfYGKilbbs8W2/4H/wG2Y55u504Ef982ZNzP/uXfuOefeOplZ2R6H1hBEgyFgIOgB2vBcFbgOLoBzoAx8dHLzug7+2x3MAWkW596wbQFiyBL6doEt4Lydh3ht/CcE7AQ3KUbeeDNIAp1BA9CS1AcdQCJYA56DaaASFIN2gR5WJ8CQyY0PgMbgPlgJChwO8RiQCQbwOIUv6LiHloPjFJMOIjTEiB3ltzaFxzvAeqeCMkA2P9L+YKNDES04VKrtA+HgFpgHNtgVlApyOEQRnDFObRuHRWbcMMX/gLOygr2eE0hQP5AHakAf8FZDTCcwlr/l4aUctib0/QFR4AVHwleboFNsh4MvHj2zGt7RMoFMvsFsD/kTlAXCwDJ2qY6NBKMs/BJIP5l8D0Eyhe41T3uJJV/BK9BaU0x78NTCf5Lhw59VcuJ0BE+MHlrIdrZH36rBZwv/zADXGZE/Rx2yDLaHNcVIr05i5F6k+A8wWtdmF/kykyWViaCuIBiUuOgdCXS5oAicZriQmbXCQZgQixVBcTwodCGomKFiKHNeKj/YuzavP8I2wcuwbnSdjm1XEuxa+haDpg7ucYVtlJQffZVp6NR6MVmmMEfJt1jOCuGlg/u8B98lkEoPRfLgs4ag3crvFIroxLzl1B6DesYs+6BxgwT2kNmaaQ79J3XaB2vcYKuFTxLxKk1BjQxBD1knN3RwcQYjs9mmupipMtS/RdBlxWHHQlgrWc2225piGrOH7niV4ru3zYulng6y8Ke76J2ebCtE0BkejLNxYVumCLPlMjnrmpF8TxvZvobfU1CACw+C8SbfDwbBby4EyTKquQydV8lFXq6n/FlvCzFi812KiaQYKVOqDUGr2ebXcmG0he8RS143to7tUjUOvWMvhTMx+ivAzDbBpZhYMAKcYFL+p4RdAH7xjSNsROB0zRWJYU2Vksfnr8hPYltmcYMwtq9BvMZazWzlrKfnMpdaCjrOoCe7GWdNmxKJrG+6uSzmjNpLYs8esCnQQjGLwU9m3FVuHvwE0ymmyoWQYFaUySyXp9rdjknjuVmyEuC6qtBlr8SwsgylGJ/TzYZUZRVyjIvIKA0hUgDu5ycQyjrbp7thlcelcD4/5Hgm4wI+4AYjtWpB3NySHbaJyktcAzPAJbc7aPfY3XEMDQlK2ethlWgsdVpZbEqdY4wr+t9beiWkCwOarP8HsWxRV7vPWEGUMnHfdTK+fwUYAO2pyPicINBuAAAAAElFTkSuQmCC') no-repeat;
background-position: center;
background-size:100%;
}
微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签的更多相关文章
- 【小程序】本地资源图片无法通过 WXSS 获取
小程序升级更改: 本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签.请参考文档: https://mp.weixin.qq.com/ ...
- 本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签
在微信小程序开发中,当在CSS中使用背景图片格式为png时就会出现: 只要把png格式改掉就可以或者在<image/>标签里面写,我实测用JPG格式和把图片转成base64是没问题的.
- 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...
- 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
wxml: <image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{i ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 微信小程序开发:学习笔记[3]——WXSS样式
微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...
- 微信小程序把玩(三十八)获取设备信息 API
原文:微信小程序把玩(三十八)获取设备信息 API 获取设备信息这里分为四种, 主要属性: 网络信息wx.getNetWorkType, 系统信息wx.getSystemInfo, 重力感应数据wx. ...
- 微信小程序——引入背景图片【六】
前言 之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了! 框架使用的是美团的mpvue,我也是一边学习,一边写的,如有错误之处,还望大家指出. 在这里我有个问题,为什么微信 ...
随机推荐
- ReactiveCocoa - iOS开发的新框架
本文转载至 http://www.infoq.com/cn/articles/reactivecocoa-ios-new-develop-framework ReactiveCocoa(其简称为RAC ...
- MQTT 3.1协议非严肃反思录
前言 MQTT 3.1协议在弱网络环境下(比如2G/3G等)表现不够好,因此才有了反思. 弱网环境下表现 手机等终端在弱网络环境下丢包情况会非常明显,连接MQTT Server成功率很低.相比单纯的请 ...
- url-loader与file-loader
一开始用url-loader的时候,想着为什么npm run build的时候,不能将图片打包到build images的目录下,原来,没有自己看这样的说明: loader 后面 limit 字段代表 ...
- 9.Node.js 包管理器npm
npm 是 Node.js 官方提供的包管理工具, 用于 Node.js包的发布.传播.依赖控制 安装 express ==> 流行的基于Node.js的Web开发框架,可以快速地搭建一个完整 ...
- 使用as3crypto在Flex中实现AES加密
要在Flex中实现AES加密,可以通过as3crypto实现.但是as3crypto本身的用法比较复杂,一般是封装一下再调用. 下面是9RIA上的一篇文章给出的一个实现,使用中稍感不方便(见注释): ...
- NAS设备是什么
1.NAS含义: NAS(Network Attached Storage)网络存储基于标准网络协议实现数据传输,为网络中的Windows / Linux / Mac OS 等各种不同操作系统的计算机 ...
- netty的解码器与粘包和拆包
tcp是一个“流”的协议,一个完整的包可能会被TCP拆分成多个包进行发送,也可能把小的封装成一个大的数据包发送,这就是所谓的TCP粘包和拆包问题. 假设客户端分别发送数据包D1和D2给服务端,由于服务 ...
- SVN常见问题及解决方法(转载)
svn常见符号 黄色感叹号(有冲突):--这是有冲突了,冲突就是说你对某个文件进行了修改,别人也对这个文件进行了修改,别人抢在你提交之前先提交了,这时你再提交就会被提示发生冲突,而不允许你提交,防止你 ...
- CH1301 邻值查找【set应用】
1301 邻值查找 0x10「基本数据结构」例题 描述 给定一个长度为 n 的序列 A,A 中的数各不相同.对于 A 中的每一个数 A_i,求:min(1≤j<i) |A_i-A_j|以及令上 ...
- java 中关于System.out.println()的问题
Java 的输出知识 1.System.out.println()不能直接写在类中,例如: 因为在 Class A{ //成员变量 //构造方法 //普通方法 //内部类 } 如果硬是想使用Syste ...