介绍
@pluritech/ng-image-preview 是一个基于 Angular 的图片预览组件。它可以在用户点击缩略图之后快速加载并展示大图,从而提升用户体验。
安装
使用 npm 进行安装:
--- ------- ------ ---------------------------
或者使用 yarn 进行安装:
---- --- ---------------------------
使用
- 导入 ImagePreviewModule:
------ - ------------------ - ---- ------------------------------ ----------- -------- -------------------- -- ------ ----- --------- - -
- 在 HTML 模板中使用 image-preview 组件:
-------------- --------------------------------------- ---------------------------------------------------------------------
属性
src
: 表示要显示的大图的 URL,必填。
thumbnailSrc
: 表示缩略图的 URL,选填。如果不提供,组件会使用 src 属性对应的图片作为缩略图。
事件
onLoad
: 当图片加载完成时触发。可以通过 $event
参数获取加载完成后的图片信息。
示例代码
------ - --------- - ---- ---------------- ------ - --------------------- - ---- ------------------------------ ------------ --------- ----------- --------- - ---- ----------- ----- -- -------- -------------- ------------------- ---------------------------- ------------------------------------------------- ------ - -- ------ ----- ------------ - ------ - - - ------ --------------------------------- ------ ------------------------------------ -- - ------ --------------------------------- ------ ------------------------------------ -- - ------ --------------------------------- ------ ------------------------------------ - -- -------------------- ----------------------- ---- - ------------------ ------- ------------------------------------------------------- - -
此外,@pluritech/ng-image-preview 还支持通过 CSS 自定义样式。如果您需要更多的自定义样式,请查看官方文档。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562dd81e8991b448e0517