图像

<image>

说明

图片的容器组件；行内块元素 inline-block，可设置宽度、高度

支持 JPG、PNG、SVG、WEBP、GIF等格式

默认宽度320px、高度240px

指定 src 的同时，还应指定显式模式 mode

通常需要一个容器包裹图像组件；图像比例尽量和容器保持一致

更多信息，请查看官方文档 - image

通用属性
属性	说明
src	图片资源地址请使用在线资源或自建服务器资源，不要使用本地资源
mode	图片裁剪、缩放的模式 saleToFill：不保持纵横比；缩放至填满；图片会变形；默认模式 apectFit：保持纵横比；缩放至完全显示；同contain；可能有留白 apectFill：保持纵横比；缩放至完全填充；同cover；图片会被裁剪* wdthFix：宽度不变，高度自动变化 hightFix：高度不变，宽度自动变化
show-menu-by-longpress	布尔；默认false；长按图片操作：转发、保存、收藏、识别等
bindload	图片载入完毕时触发
binderror	图片载入错误发生时触发

WebView 特有属性
属性	说明
lazy-load	布尔；默认false；图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

Skyline 特有属性
属性	说明
fade-in	布尔；默认false；是否渐显

长按图片转发

<image src="xxx.jpg"  show-menu-by-longpress mode="widthFix"/>

在线图片的使用

受小程序大小2M的限制，大多数多媒体资源，如图片、视频、音频等不能本地使用，只能在线获取

方案1：外网在线资源；容易出现死链

方案2：自建资源服务器，详情请参考静态资源服务器

方案3：利用 - 大树小站 - 提供的在线图片；更多图片持续更新中。。。如果有喜欢的图片，也可以由老师代为更新

背景图片

使用背景图片可以省掉部分组件元素

但是：默认情况下不支持background-image: url()属性

更多背景样式，请访问背景图片、背景图片、渐变背景

定位

使用定位，让图片在下面，模拟背景

容器采用相对定位，提供参考

实现1

结构中，图片在前，内容在后

图片正常文档流使用作为背景

内容采用绝对定位，脱离文档流后覆盖在图片上面

<view class="wrap">
    <image class="img"  src="" mode="" />
    <view class="cont"/></view>
</view>

.wrap {
    position: relative;
}
    
.cont {
    position: absolute;
    left: 0;
    top: 0;
}
    
.img {
    width: 100vw;
    height: 100vh;
}

实现2

结构中，内容在前，图片在后

内容正常文档流使用

图片采用绝对定位，脱离文档流后，降低层级 z-index 后定位在内容下面

<view class="wrap">
    <view class="cont"/></view>
    <image class="img"  src="" mode="" />
</view>

.wrap {
    position: relative;
}
    
.img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
}

使用base64

将本地图片转换为base64格式后再应用于背景图片属性

转换工具：图片转 BASE64 编码

background-size: cover;
background-image: url(data:image/jpeg;base64....)

使用背景渐变

使用多个颜色模拟背景，强烈推荐

page {
    height: 100vh;
    background-image: linear-gradient(#0093E9, #80D0C7);
}