跳到主要内容

图片

WdImage

适用场景#

用于在页面进行图片的展示。

基础能力说明#

  1. 图片的基础属性提供图片选择/地址输入、布局模式、点击预览大图配置,布局模式默认高度自适应,更好的适配多端图片展示效果
  2. 图片的高级属性支持配置图片的替代文字(img 标签的 alt 属性),提供懒加载开关(懒加载多适用于图片较多的页面,可减少无效资源的加载)

扩展场景说明#

定高定宽的图片,如何选择布局模式#

示例

设计提供了宽 300、高 150 的图片,如何选择布局

配置方法

样式-布局中宽度和高度按照设计提供的数值配置,属性-基础属性-布局模式,选择拉伸填满或者裁剪填满都可以:

注:小程序中图片高度在样式面板中直接配置百分比会不生效,不建议小程序的图片高度配置百分比。如果您要配置小程序中图片高度为百分比,需要为其父级容器定一个确定的高度,即包含图片的父容器有确定的高度,图片的高度设定成百分比才有意义

组件使用限制#

需注意,由于小程序端样式限制问题,图片组件的高度不得设置为 auto,否则将无法渲染。

示例#

交互式预览#

布局模式#

从左至右依次为:剪裁填满,等比缩放,拉伸填满,高度自适应,宽度自适应

点击预览大图#

此功能默认关闭,开启此功能后,点击图片会展示图片预览

再次点击关闭预览#

此功能默认关闭,需先开启点击预览大图,才可开启此功能。 点击图片展示图片预览后,再次点击弹出层可关闭预览。

替代文字#

图片标签的 alt 属性

样式 API 自定义样式#

/* 修改图片预览弹出层背景色 */.wd-image-preview-container .wd-image__mask {  background-color: #ddd;}/* 修改图片预览弹出层右上角关闭按钮 */.wd-image-preview-container .wd-image__mask-close {  width: 14px;  height: 14px;  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNCA3QzE0IDMuMTM0MDEgMTAuODY2IDEuMTgyOTJlLTA2IDcgMEMzLjEzNDAxIC0yLjE0MTg2ZS0wNiAxLjE4MjkyZS0wNiAzLjEzNCAwIDdDLTIuMTQxODZlLTA2IDEwLjg2NiAzLjEzNCAxNCA3IDE0QzEwLjg2NiAxNCAxNCAxMC44NjYgMTQgN1pNNC42NzA5MSAzLjk0NzU0TDcuMDAwMDEgNi4yOTA3NUw5LjMyOTEyIDMuOTQ3NTRMMTAuMDM4NCA0LjY1MjUxTDcuNzA0OTkgN0wxMC4wMzgzIDkuMzQ3NDlMOS4zMjkxMSAxMC4wNTI1TDcuMDAwMDEgNy43MDkyNUw0LjY3MDkyIDEwLjA1MjVMMy45NjE2OCA5LjM0NzQ5TDYuMjk1MDMgN0wzLjk2MTY3IDQuNjUyNTFMNC42NzA5MSAzLjk0NzU0WiIgZmlsbD0iIzA2MCIvPgo8L3N2Zz4K);}

属性#

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
地址srcstring基础属性"https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg"更改需要展示的图片
布局模式fit"cover"|"contain"|"fill"|"widthFix"|"heightFix"基础属性"widthFix"更改图片的布局模式
点击预览大图imgPreviewboolean基础属性false开启后,点击图片后图片会展示为大图
再次点击关闭预览maskClosableboolean基础属性true开启后,再次点击蒙层会关闭图片预览
替代文字altstring高级属性"[图片]"<img> 标签的 alt 属性
识别小程序码(小程序)showMenuByLongpressboolean高级属性true小程序专有属性,长按图片可唤起识别小程序码功能
懒加载lazyLoadboolean高级属性false图片按需加载,若图片没有被展示,则不会加载

事件#

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
加载成功load兼容三端-
加载失败error兼容三端-
点击tap兼容三端-

属性 API#

通过属性 API,可以获取组件内部的状态和属性值

只读属性名
属性标识
类型
说明
地址srcstring更改需要展示的图片
布局模式fit"cover"|"contain"|"fill"|"widthFix"|"heightFix"更改图片的布局模式
替代文字altstring<img> 标签的 alt 属性

方法 API#

样式 API#

通过样式 API,可以覆盖组件中内部元素的样式来实现自定义

名称
类名
说明
根元素.wd-image图片组件根元素
PC 端根元素.wd-pc-image可以为 PC 端的图片编写样式
H5 端根元素.wd-h5-image可以为 H5 端的按钮编写样式
小程序端根元素.wd-mp-image可以为小程序端的图片编写样式
预览弹窗根元素.wd-image-preview-container点击预览图片时打开的预览弹窗
预览背景.wd-image-mask点击预览图片时的蒙层
关闭按钮.wd-image-mask__icon-close点击预览图片时的右上角的关闭按钮

了解样式 API

CSS 变量#

.wd-image-mask,.wd-image {  /* PC端弹窗样式 */  --wd-image-mask-pc: var(--wd-bg-mask);  /* H5及小程序端弹窗样式 */  --wd-image-mask-h5: var(--wd-black);  /* 弹窗关闭按钮 */  --wd-image-close-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTUuOTk5NTkgNy4zNzg4NEwxMC42MTM0IDExLjk5MjdMMTEuOTkyMyAxMC42MTM4TDcuMzc4NDQgNS45OTk5OEwxMS45OTIzIDEuMzg2MTNMMTAuNjEzNCAwLjAwNzI3MjYyTDUuOTk5NTkgNC42MjExMkwxLjM4NTY5IDAuMDA3MjMyNjdMMC4wMDY4MzU5NCAxLjM4NjA5TDQuNjIwNzMgNS45OTk5OEwwLjAwNjgzNTk0IDEwLjYxMzlMMS4zODU2OSAxMS45OTI3TDUuOTk5NTkgNy4zNzg4NFoiIGZpbGw9IiNFRUVFRUUiLz4KPC9zdmc+');  /* 图片加载错误时默认展示图片 */  --wd-image-error-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwIiBoZWlnaHQ9IjE4MSIgdmlld0JveD0iMCAwIDE4MCAxODEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxODAiIGhlaWdodD0iMTgwLjAwMiIgZmlsbD0iI0UzRTZFQiIvPgo8cGF0aCBkPSJNNjYgNjkuNjIwNUM2NiA2Ny42MjEgNjcuNjIxIDY2IDY5LjYyMDUgNjZIMTEwLjM4QzExMi4zNzkgNjYgMTE0IDY3LjYyMSAxMTQgNjkuNjIwNVYxMTAuMzhDMTE0IDExMi4zNzkgMTEyLjM3OSAxMTQgMTEwLjM4IDExNEg2OS42MjA1QzY3LjYyMSAxMTQgNjYgMTEyLjM3OSA2NiAxMTAuMzhWNjkuNjIwNVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik02NiA2OS41NTU2QzY2IDY3LjU5MTkgNjcuNTkxOSA2NiA2OS41NTU2IDY2SDExMC40NDRDMTEyLjQwOCA2NiAxMTQgNjcuNTkxOSAxMTQgNjkuNTU1NlYxMTAuNDQ0QzExNCAxMTIuNDA4IDExMi40MDggMTE0IDExMC40NDQgMTE0SDY5LjU1NTZDNjcuNTkxOSAxMTQgNjYgMTEyLjQwOCA2NiAxMTAuNDQ0VjY5LjU1NTZaIiBmaWxsPSIjQkNDNEQwIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAwLjY2NiA4MS45OTk5QzEwMC42NjYgODMuNDcyNyA5OS40NzE5IDg0LjY2NjYgOTcuOTk5MiA4NC42NjY2Qzk2LjUyNjQgODQuNjY2NiA5NS4zMzI1IDgzLjQ3MjcgOTUuMzMyNSA4MS45OTk5Qzk1LjMzMjUgODAuNTI3MiA5Ni41MjY0IDc5LjMzMzMgOTcuOTk5MiA3OS4zMzMzQzk5LjQ3MTkgNzkuMzMzMyAxMDAuNjY2IDgwLjUyNzIgMTAwLjY2NiA4MS45OTk5Wk04Ny4wMTk5IDg2LjIxMTlDODYuNDU5OCA4NS41NDEyIDg1LjM4OTcgODUuNTgwOCA4NC44ODk4IDg2LjMzMDdMODQuMjIxNyA4Ny4zMzI4TDg4LjkwODQgOTQuNDI5N0M4OS40MjU2IDk1LjIxMyA4OS4yNDQ4IDk2LjI2MzUgODguNDk1NCA5Ni44Mjg3TDg0LjU1MjYgOTkuODAyNEw4NS4yNjU5IDEwMC42NjdIOTYuNjUzNEw4Ny4wMTk5IDg2LjIxMTlaTTgwLjY1NTUgMTAwLjY2N0w4MC42MjggMTAwLjYzM0M4MC4zMTkyIDEwMC4yNTkgODAuMTc2NyA5OS43NzUzIDgwLjIzMzUgOTkuMjkzNkM4MC4yOTAyIDk4LjgxMTkgODAuNTQxMyA5OC4zNzQzIDgwLjkyODUgOTguMDgyMkw4NS4wMjEyIDk0Ljk5NTZMODIuMDgxMiA5MC41NDM2TDc2LjcxNDUgOTguNTkzN0M3Ni4xMjM3IDk5LjQ3OTcgNzYuNzU4OSAxMDAuNjY3IDc3LjgyMzkgMTAwLjY2N0g4MC42NTU1Wk05OS4wNTY5IDEwMC42NjdMOTUuMTk1MyA5NC44NzI0TDk2Ljg4OTggOTIuMzMwN0M5Ny40MTc1IDkxLjUzOSA5OC41ODA4IDkxLjUzOSA5OS4xMDg2IDkyLjMzMDdMMTAzLjI4NCA5OC41OTM3QzEwMy44NzUgOTkuNDc5NyAxMDMuMjM5IDEwMC42NjcgMTAyLjE3NCAxMDAuNjY3SDk5LjA1NjlaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');}

版本变化#