微信小程序图片显示不全

最新推荐文章于 2025-05-10 10:22:41 发布

大飞果果

最新推荐文章于 2025-05-10 10:22:41 发布

阅读量2.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信微信小程序图片 image 显示不全

本文链接：https://blog.youkuaiyun.com/wangsf789/article/details/53392922

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文探讨了微信小程序中图片显示不全的问题，重点在于理解`image`组件的默认尺寸和`mode`属性。通过官方API，作者指出未设置宽高的`image`组件将按300px * 225px显示。解决方法是获取图片真实宽高，并根据屏幕宽度动态调整显示尺寸，确保图片等比例缩放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

image

图片。

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式
binderror	HandleEvent		当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
bindload	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

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

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

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

WXML:

<image style="width: {{imageWidth}}px; height: {{imageHeight}}px;" src="{{imgurl}}"  mode="aspectFill" bindload="imgload"></image>

JS:

Page({
  data:{
    imgurl:'http://hukang02.b0.upaiyun.com/1480321452672.jpg',
    imageWidth:0,
    imageHeight:0 
 },
  imgload: function(e){
    console.log("图片加载完成="+e.detail);
    //用来计算高宽
    this.setData(wxAutoImageCal(e));
 }
})

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

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

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

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

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

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

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;
  }

如上，大功告成了，显示如下