KeCheng

3.1 KiB

Raw Permalink Blame History Unescape Escape

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

title	description	spline	isComponent
Image 图片	用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。	base	true

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
    "t-image": "tdesign-miniprogram/image/image"
}

代码演示

裁切样式

加载状态

常见问题

本地图片无法正确引用? 👇

建议使用绝对路径，而不是相对路径。绝对路径以 app.json 所在位置为基准。

API

Image Props

名称	类型	默认值	说明	必传
error	String / Slot	'default'	加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败”	N
external-classes	Array	-	组件类名，分别用于设置加载组件外层元素，中间内容等元素类名。`['t-class', 't-class-load']`	N
height	String / Number	-	高度，默认单位为`px`	N
lazy	Boolean	false	是否开启图片懒加载	N
loading	String / Slot	'default'	加载态内容。值为 `default` 则表示使用默认加载中风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `loading`；值为其他则表示普通文本内容，如“加载中”	N
mode	String	scaleToFill	图片裁剪、缩放的模式；小程序官方文档。可选项：scaleToFill/aspectFit/aspectFill/widthFix/heightFix/top/bottom/center/left/right/top left/top right/bottom left/bottom right	N
shape	String	square	图片圆角类型。可选项：circle/round/square	N
show-menu-by-longpress	Boolean	false	长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。	N
src	String	-	图片链接	N
webp	Boolean	false	默认不解析 webP 格式，只支持网络资源	N
width	String / Number	-	宽度，默认单位为`px`	N

Image Events

名称	参数	描述
error	-	图片加载失败时触发
load	-	图片加载完成时触发

3.1 KiB Raw Permalink Blame History Unescape Escape

引入