微信小程序:本地资源图片无法通过 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. filter IE滤镜(Internet Explorer)CSS

    收集一些IE滤镜,留作之后开发用. 透明度 #myElement { opacity: .; /* other browsers */ filter: progid: DXImageTransform ...

  2. 【LeetCode】Pascal's Triangle II (杨辉三角)

    Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3, Return [1,3 ...

  3. MyBatis——Java API

    Java API 既然你已经知道如何配置 MyBatis 和创建映射文件,你就已经准备好来提升技能了. MyBatis 的 Java API 就是你收获你所做的努力的地方.正如你即将看到的,和 JDB ...

  4. 兼容ie8的框架

    layui Flow-UI http://refined-x.com/Flow-UI/

  5. 【BZOJ3939】[Usaco2015 Feb]Cow Hopscotch 动态规划+线段树

    [BZOJ3939][Usaco2015 Feb]Cow Hopscotch Description Just like humans enjoy playing the game of Hopsco ...

  6. windows 下,go语言 交叉编译

    http://bbs.csdn.net/topics/390601048 参考上面的操作

  7. 徐州网络赛A-Hard To Prepare【dp】【位运算】【快速幂】

    After Incident, a feast is usually held in Hakurei Shrine. This time Reimu asked Kokoro to deliver a ...

  8. Dubbo学习记录

    参考资料: 官网 Dubbo详细介绍与安装使用过程

  9. lambda 缩写推演

  10. Linux服务器报错too many open files错误解决方案

    1.本质解决方案按照oracle的安装脚本中以下几项文件进行相应配置: cp /etc/security/limits.conf /etc/security/limits.conf.bak echo ...