微信小程序无法显示图片，图片显示不全怎么办?

　　微信小程序无法显示图片，图片显示不全怎么办?对于一张网络图片高度太高，而显示不全如何解决?下面小编就来为大家讲解一下。

　　其实我一贯的观点是，所有的问题从api中都能够找到答案，只是有时候缺少耐

　　心，而没有好好去读官方api,出现问题后着急的google、百度、github... 下面我们来看下api 怎么说的：

　　image

　　图片。

　　属*名类型默认值说明

　　srcString 图片资源地址

　　modeString'scaleToFill'图片裁剪、缩放的模式

　　binderrorHandleEvent 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}

　　bindloadHandleEvent 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

　　注：image组件默认宽度300px、高度225px

　　mode有12种模式，其中3种是缩放模式，9种是裁剪模式。

　　特别注意：“注”的位置 说了，如果image标签不写宽高属*，则默认显示宽度300px、高度225px。所以如下方法就可以在图片下载成功后拿到图片的宽高属*值了，如下：

　　WXML:

　　[html] view plain copy

　　imgload">

　　JS:

　　[javascript] view plain copy

　　Page({

　　data:{

　　imgurl:'hukang02.b0.upaiyun/1480321452672.jpg',

　　imageWidth:0,

　　imageHeight:0

　　},

　　imgload: function(e){

　　console.log("图片加载完成="+e.detail);

　　//用来计算高宽

　　this.setData(wxAutoImageCal(e));

　　}

　　})

　　上面方法就可以得到图片的高宽

　　打印的数据是：{width:720,height:1546}

　　接下来是如何显示的问题:

　　如果图片宽度大于屏幕宽度，则显示屏幕宽度大小，此时图片高度需要等比例压缩;

　　如果图片宽度小于等于屏幕宽度，则正常显示图片宽高。

　　以下方法是根据屏幕宽度比较宽度大小，从而计算显示的高宽：

　　[javascript] view plain copy

　　function wxAutoImageCal(e){

　　//获取图片的原始长宽

　　var originalWidth = e.detail.width;

　　var originalHeight = e.detail.height;

　　var windowWidth = 0,windowHeight = 0;

　　var imageWidth= 0,imageHeight= 0;

　　var results= {};

　　//获取屏幕信息

　　wx.getSystemInfo({

　　success: function(res) {

　　windowWidth = res.windowWidth;

　　windowHeight = res.windowHeight;

　　//判断按照那种方式进行缩放

　　if(originalWidth > windowWidth){//在图片width大于手机屏幕width时候

　　imageWidth= windowWidth;

　　imageHeight= (imageWidth*originalHeight)/originalWidth;

　　results.imageWidth= imageWidth;

　　results.imageHeight= imageHeight;

　　}else{//否则展示原来的数据

　　results.imageWidth= originalWidth;

　　results.imageHeight= originalHeight;

　　}

　　}

　　})

　　return results;

　　}

　　以上就是小编为大家整理的关于微信小程序无法显示图片，图片显示不全怎么办的内容。更多更精彩的内容请持续关注小程序商店。

　　相关阅读：

       微信小程序怎么播放本地音乐?

       微信小程序下拉框开发代码

       如何开通小程序店铺？