【微信小程序】background-image设置背景图片不显示的解决办法

相关代码如下：

<image class="imgBox" style="background-image:url('http://ymzp.0633hr.com/upload/app/2019-08-02/1564730097202-2019-08-02.png')" >
</image>

微信小程序将本地拍照/相机选择的图片设置到background-image上是不能显示的。

<image class="imgBox" style="background-image:url('http://tmp/wx1e4dd12766f1b015.o6zAJs15FvORcBqF5xfEIJgbuAKI.ZtvcPNdqMc41f2dc8918f6a22cbecb7102e0cd2c3f6e.png')" >
</image>

解决办法1：使用wx.getFileSystemManager将本地拍照/相机选择的图片转成base64格式,设置到background-image上。

wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], //  可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], //  可以指定来源是相册还是相机，默认二者都有success: function(e) { // 选择图片成功console.log("本次选择图片" + JSON.stringify(e.tempFilePaths));var baseImg = "";wx.getFileSystemManager().readFile({filePath: e.tempFilePaths[0], // 选择图片返回的相对路径encoding: 'base64', // 编码格式success: res => { // 转码成功的回调baseImg = 'data:image/png;base64,' + res.data;console.log('data:image/png;base64,' + res.data);// 后续的逻辑处理......}})},fail: function(error) {console.error("调用本地相册文件时出错")console.warn(error)},complete: function() {}})

打印base64的log如下：

data:image/png;base64,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

解决办法2：弃用background-image赋值的方式，改用image组件的src属性,本地拍照/相机选择的图片都能显示。

<image class="imgBox" mode="aspectFill" src="http://tmp/wx1e4dd12766f1b015.o6zAJs15FvORcBqF5xfEIJgbuAKI.ZtvcPNdqMc41f2dc8918f6a22cbecb7102e0cd2c3f6e.png">
</image>

作者：CoderZb
链接：https://www.jianshu.com/p/69d5fe48339d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

【微信小程序】background-image设置背景图片不显示的解决办法相关推荐

【微信小程序】background-image设置背景图片
微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片: base64图片设置步骤如下:1.在转base64工具(自己百度下base64编码转换工具) ...
微信小程序—swiper轮播图图片不显示的解决方法
swiper轮播图图片不显示的解决方法遇到图片无法显示的问题,是样式问题在wxss里面新型修改设置宽度 .container{width: 750rpx; } .container swiper ...
php获取微信图片访问权限,微信小程序访问图片出现403，图片防盗链的解决办法...
在写小程序的时候,访问一个网址获取图片,但是显示会出现403(防止盗链)的错误. 总结了一下,有两种方法是可以解决这个问题的:使用images.weserv.nl方案使用no-referrer方案 ...
微信小程序，动态改变背景图片
前言,作为开发新人,最近在学习微信小程序,期间遇到不少问题,对问题的解决的方法进行记录,以供学习之用. 关于微信小程序的背景图片问题, 1.微信小程序不能使用本地的图片设置背景图片,即 <vie ...
微信小程序使用image组件时图片不显示的一个解决方法
第一次写博客: 图片链接可正常访问,但是使用组件时,图片不显示,偶然之间尝试到了一种解决方法,我使用的是微信小程序云端,读取本地图片时使用了具体的路径,错误用法如下如果按照指示\ 一级一级选下来,导 ...
微信小程序实现页面加入背景图片以及调节透明度
在微信小程序中有时候需要在页面加入背景图片以及调节透明度让我们的小程序变得更加美观,以下是代码实现: 1.WXML <view class="bg" ><imag ...
微信小程序开发：设定背景图片
文章目录前言: 一.原因与解决方法二.其他设置背景图片的方式 1.获取网络图片 2.将图片转换成base64格式 3.使用image标签前言: 今天在开发小程序的时候用到背景图片设定功能,但请求 ...
vue h5网页点击按钮 -- 跳到微信小程序 wx-open-launch-weapp；onMenuShareAppMessage 分享图片不显示，且方法已废弃
h5网页点击按钮,唤醒微信小程序是否可以做? 可以!!,就是有点限制. 通过wx-open-launch-weapp就可以实现,但是限制微信服务号才可以使用.也就是说必须是微信环境下. 文章最下边, ...
微信小程序不能直接加载本地静态图像作为背景的解决办法
1.背景图片设置可以用服务器上的图片. 2.将本地图片转成base64的. wxml: <view class="title-top flex-row"><vie ...
微信小程序开发之编译自动生成新文件的解决办法
文章目录前言微信小程序开发中一自动编译就自动生成一些wxss,wxml,文件的解决办法一. 问题详情二.为什么会出现这个情况三.解决办法 1.找到app.json文件夹下的具体页面详情 2. ...

【微信小程序】background-image设置背景图片不显示的解决办法

【微信小程序】background-image设置背景图片不显示的解决办法相关推荐

最新文章

热门文章