微信小程序:本地资源图片无法通过 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标签的更多相关文章

  1. 【小程序】本地资源图片无法通过 WXSS 获取

    小程序升级更改: 本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签.请参考文档: https://mp.weixin.qq.com/ ...

  2. 本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签

    在微信小程序开发中,当在CSS中使用背景图片格式为png时就会出现: 只要把png格式改掉就可以或者在<image/>标签里面写,我实测用JPG格式和把图片转成base64是没问题的.

  3. 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...

  4. 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    wxml: <image style="width: {{imagewidth}}px; height: {{imageheight}}px;"  src="{{i ...

  5. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  6. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  7. 微信小程序开发:学习笔记[3]——WXSS样式

    微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...

  8. 微信小程序把玩(三十八)获取设备信息 API

    原文:微信小程序把玩(三十八)获取设备信息 API 获取设备信息这里分为四种, 主要属性: 网络信息wx.getNetWorkType, 系统信息wx.getSystemInfo, 重力感应数据wx. ...

  9. 微信小程序——引入背景图片【六】

    前言 之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了! 框架使用的是美团的mpvue,我也是一边学习,一边写的,如有错误之处,还望大家指出. 在这里我有个问题,为什么微信 ...

随机推荐

  1. PopupMenu弹出菜单

    CMenu MoviePopupMenu;//声明 MoviePopupMenu.CreatePopupMenu();//创建弹出菜单 根据对象类型增加弹出项 ) // FLASH对象 { CStri ...

  2. 【整理】Virtualbox中的网络类型(NAT,桥接等),网卡,IP地址等方面的设置

    之前是把相关的内容,放到: [已解决]实现VirtualBox中的(Guest OS)Mac和主机(Host OS)Win7之间的文件和文件夹共享 中的,现在把关于网络配置方面内容,单独提取出来,专门 ...

  3. JS对象添加新的字段

    var test={name:"name",age:"12"}; test.id = "12345"; 直接定义添加就成了

  4. Excel 2010版筛选怎么用

    很多人在使用excel表格的时候,不知道这个筛选功能怎么用,可以对我们平时做数据和表格带来哪些帮助.那么,接下来,小敏以excel表格2010版为例,跟大家分享一下这个excel表格筛选功能的使用方法 ...

  5. 模拟退火算法(西安网选赛hdu5017)

    Ellipsoid Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total ...

  6. 单源最短路(spfa),删边求和

    http://acm.hdu.edu.cn/showproblem.php?pid=2433 Travel Time Limit: 10000/2000 MS (Java/Others)    Mem ...

  7. log4j输出多个自定义日志文件(转)

    如果在实际应用中需要输出独立的日志文件,怎样才能把所需的内容从原有日志中分离,形成单独的日志文件呢? 先看一个常见的log4j.properties文件,它是在控制台和test.log文件中记录日志: ...

  8. zabbix_server部署,启动,及端口未监听问题

    安装 下载地址:wget https://jaist.dl.sourceforge.net/project/zabbix/ZABBIX%20Latest%20Stable/3.2.6/zabbix-3 ...

  9. 浙江工业大学校赛 XiaoWei的战斗力

    XiaoWei的战斗力 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  10. 后缀树 & 后缀数组

    后缀树: 字符串匹配算法一般都分为两个步骤,一预处理,二匹配. KMP和AC自动机都是对模式串进行预处理,后缀树和后缀数组则是对文本串进行预处理. 后缀树的性质: 存储所有 n(n-1)/2 个后缀需 ...