示例

PCPhonePad

HTMLJAVASCRIPTCSS

<page title="图片">
    <module title="fill">
        <image width="200px" height="200px" mode="fill"
                 src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg"></image>
    </module>
    <module title="contain">
        <image width="200px" height="200px" mode="contain"
                 src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg"></image>
    </module>
    <module title="cover">
        <image width="200px" height="200px" mode="cover"
                 src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg"></image>
    </module>
    <module title="none">
        <image width="200px" height="200px" mode="none"
                 src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg"></image>
    </module>
    <module title="scale-down">
        <image width="200px" height="200px" mode="scale-down"
                 src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg"></image>
    </module>
</page>

export default XPage({
  data: {},
  
  show() {
  
  },
});

Attributes

参数	说明	类型	可选值	默认值	端	版本
src	图片地址	string	-	-	PC/Mobile	--
mode	图片如何适应容器框，同原生object-fit	string	fill / contain / cover / none / scale-down	fill	PC/Mobile	--
width	设置image容器宽度	string	-	-	PC/Mobile	--
height	设置image容器高度	string	-	-	PC/Mobile	--

Mode

可选值	说明
contain	缩放图片并保持宽高比以完全填充容器，容器可能存在部分空白。
cover	缩放图片并保持宽高比以填满容器，容器不会留空白，图片可能被裁剪。
fill	缩放图片以填满容器，缩放时不会保持图片的长宽比。
none	保持图片尺寸。
scale-down	保持图片宽高比，容器尺寸大于图片尺寸，等同none；容器尺寸小于图片尺寸，等同contain