最全面的微信小程序渲染图片的方式

前言

在小程序中渲染图片时，对于大图会出现图片比例失调的问题，小程序的文档中有如下介绍

image

1、正常渲染图片

在开发者工具中调试

<!-- imagetest.wxml -->
<view class="con">
  <view>未使用mode</view>
  <view>
    <image src="/public/img/big.jpg" />
  </view>
  <view>mode=widthFix</view>
  <view>
    <image mode="widthFix" src="/public/img/big.jpg" />
  </view>
  <view>mode=widthFix且style="width:100%;"</view>
  <view>
    <image mode="widthFix" src="/public/img/big.jpg" style="width:100%;"/>
  </view>
</view>

/* imagetest.wxss */
.con{
  padding: 20rpx;
  box-sizing: border-box;
}

从截图中可以看出

• 第一张图片的宽高是 image 默认宽高
• 第二张图片添加了 mode 值为 widthFix，会自动计算默认宽度下，图片的高度
• 第三张图片添加了 mode 值为 widthFix，且限制了 width 为 100%，即

2、使用 rich-text 渲染 html 字符串

在小程序中可以使用 rich-text 渲染 html 字符串，如果字符串中包含图片，请看如下案例：

• 图片添加样式 width:100% 还是 max-width:100%？
  使用 max-width:100%
  
• 图片是否添加 vertical-align:middle
  若图片需要和文字居中，则需要添加
• 图片是否需要添加 height:auto
html 中 img 标签的 height 属性默认是 auto，故无需添加
  

<!-- imagetest.wxml -->
  <view class="r_img">
    <rich-text nodes="<p><img   alt='' style='max-width:100%;height:auto;vertical-align:middle;' src='/public/img/1.svg'>图片类型：svg图片</p><p>图片样式：max-width:100%;<br>height:auto;<br>vertical-align:middle;</p>"></rich-text>
  </view>
  <view class="r_img">
    <rich-text nodes="<p><img   alt='' style='width:100%;height:auto;vertical-align:middle;' src='/public/img/1.svg'>图片类型：svg图片</p><p>图片样式：width:100%;<br>height:auto;<br>vertical-align:middle;</p>"></rich-text>
  </view>
  <view class="r_img">
    <rich-text nodes="<p><img   alt='' style='max-width:100%;height:auto;' src='/public/img/1.svg'>图片类型：svg图片</p><p>图片样式：max-width:100%;<br>height:auto;</p>"></rich-text>
  </view>
  <view class="r_img">
    <rich-text nodes="<p><img   alt='' style='width:100%;height:auto;' src='/public/img/1.svg'>图片类型：svg图片</p><p>图片样式：width:100%;<br>height:auto;</p>"></rich-text>
  </view>
  <view class="r_img">
    <rich-text nodes="<p><img   alt='' style='max-width:100%;' src='/public/img/1.svg'>图片类型：svg图片</p><p>图片样式：max-width:100%;</p>"></rich-text>
  </view>
  <view class="r_img">
    <rich-text nodes="<p><img   alt='' style='width:100%;' src='/public/img/1.svg'>图片类型：svg图片</p><p>图片样式：width:100%;</p>"></rich-text>
  </view>

/* imagetest.wxss */
.r_img{
  border: 2rpx solid #ccc;
  padding: 10rpx;
  margin-bottom: 20rpx;
}