介绍
@pluritech/ng-image-preview 是一个基于 Angular 的图片预览组件。它可以在用户点击缩略图之后快速加载并展示大图，从而提升用户体验。
安装
使用 npm 进行安装：
npm install --save @pluritech/ng-image-preview
或者使用 yarn 进行安装：
yarn add @pluritech/ng-image-preview
使用
- 导入 ImagePreviewModule：
import { ImagePreviewModule } from '@pluritech/ng-image-preview';
@NgModule({
imports: [ImagePreviewModule]
})
export class AppModule { }- 在 HTML 模板中使用 image-preview 组件：
<image-preview [src]="'https://example.com/image.jpg'" [thumbnailSrc]="'https://example.com/thumbnail.jpg'"></image-preview>
属性
src: 表示要显示的大图的 URL，必填。
thumbnailSrc: 表示缩略图的 URL，选填。如果不提供，组件会使用 src 属性对应的图片作为缩略图。
事件
onLoad: 当图片加载完成时触发。可以通过 $event 参数获取加载完成后的图片信息。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- ------------------------------
------------
--------- -----------
--------- -
---- ----------- ----- -- --------
-------------- ------------------- ---------------------------- -------------------------------------------------
------
-
--
------ ----- ------------ -
------ - -
- ------ --------------------------------- ------ ------------------------------------ --
- ------ --------------------------------- ------ ------------------------------------ --
- ------ --------------------------------- ------ ------------------------------------ -
--
-------------------- ----------------------- ---- -
------------------ ------- -------------------------------------------------------
-
-此外，@pluritech/ng-image-preview 还支持通过 CSS 自定义样式。如果您需要更多的自定义样式，请查看官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562dd81e8991b448e0517