图片控件(image)

图片控件介绍

图片控件(image)图片控件用于显示来自网络的图片。

属性-src

图片的url。 <template> <image id="demo" src="https://www.baidu.com/img/bd_logo1.png"/> </template>

属性-scaleType

控制图片根据图片控件的宽高放缩时的模式。可选的值为:
  • center。在控件中居中显示图像, 但不执行缩放。
  • centerCrop。保持图像的长宽比缩放图片, 使图像的尺寸 (宽度和高度) 等于或大于控件的相应尺寸 (不包括内边距padding)并且使图像在控件中居中显示。
  • centerInside。保持图像的长宽比缩放图片, 使图像的尺寸 (宽度和高度) 小于视图的相应尺寸 (不包括内边距padding)并且图像在控件中居中显示。
  • fitCenter。保持图像的长宽比缩放图片, 使图片的宽或高和控件的宽高相同并使图片在控件中居中显示
  • fitEnd。保持图像的长宽比缩放图片, 使图片的宽或高和控件的宽高相同并使图片在控件中靠右下角显示
  • fitStart。保持图像的长宽比缩放图片, 使图片的宽或高和控件的宽高相同并使图片在控件靠左上角显示
  • fitXY。使图片和宽高和控件的宽高完全匹配,但图片的长宽比可能不能保持一致
  • matrix。绘制时使用图像矩阵进行缩放。需要在代码中使用setImageMatrix(Matrix)函数才能生效。
默认的scaleType为fitCenter;除此之外最常用的是fitXY, 他能使图片放缩到控件一样的大小,但图片可能会变形。 <template> <linear> <image id="demo" scaleType="fitXY"/> </linear> </template>