e-ngx-viewer是一个用于在Web应用程序中显示高清图片或其他格式文件的前端组件库。它可以适应不同的浏览器和设备，并且具有易于定制和使用的API。本文将详细介绍如何使用e-ngx-viewer进行图片展示，包括其基本用法、可用的选项、事件以及一些实现细节。
安装
使用npm进行安装：
npm install e-ngx-viewer --save
基本用法
将要使用e-ngx-viewer展示的图片嵌入到HTML页面中，并以标签的形式展示它们，例如：
<img src="https://picsum.photos/500/300/?image=967"> <img src="https://picsum.photos/500/300/?image=1073"> <img src="https://picsum.photos/500/300/?image=1079">
然后，在需要使用e-ngx-viewer的组件中引入并使用它：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ---------------
------------
--------- ---------------
--------- -
------ --------------
---- ---------- -----------------------------------------------
---- ---------- ------------------------------------------------
---- ---------- ------------------------------------------------
--
--
------ ----- ----------- -
------------------- -------------- ------------------ --
-注意，需要将需要展示的图片用eNgxViewer指令进行标记。此时，每一张图片都可以通过点击或双击来放大并查看。
选项
e-ngx-viewer提供了一些可选的配置项，以适应不同的应用场景。这些选项可以通过实例化ENgxViewerOptions类进行设置，并在使用eNgxViewer指令时通过@Input的形式传递到组件中。
以下是一些常用的选项：
- zoomMode (ZoomMode): 设置缩放模式，有
Click和Hover两种模式，默认为Click方式。在Click模式下，只有当用户点击图片时才会进行放大；在Hover模式下，当鼠标悬停在图片上时就会进行放大。 - container (HTMLElement): 用于指定容器元素，可以是任何具有相对定位的HTML元素，默认为
document.body。 - loadingText (string): 设置加载图片时的提示文本，默认为
Loading...。
在实例化ENgxViewerOptions类时，可以设置这些选项：
const options = new ENgxViewerOptions({
zoomMode: ZoomMode.Click,
container: document.querySelector('my-container'),
loadingText: 'please wait...',
});然后在组件中使用：
<img eNgxViewer [options]="options" src="https://picsum.photos/500/300/?image=967">
事件
e-ngx-viewer也提供了一些事件，以更好的控制图片的展示效果。这些事件以回调函数的形式提供，你可以在组件中绑定它们：
- onOpened(): 当图片已放大并显示时激发。
- onClosed(): 当关闭图片的浏览时激发。
- onError(): 当图片加载失败时激发。
例如，定义一个onOpened回调函数：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ---------------
------------
--------- ---------------
--------- -
------ --------------
---- ---------- ---------------------------- -----------------------------------------------
--
--
------ ----- ----------- -
------------------- -------------- ------------------ --
--------------- -
------------------ ----------
-
-实现细节
e-ngx-viewer实际上是一种将高清图片嵌入到iframe中进行展示的技术。该组件库通过创建一个iframe元素，并将图片的URL作为src属性进行加载。这种技术可以有效地避免由于图片较大而导致网页渲染速度变慢的问题。
结论
e-ngx-viewer是一个实用的图片展示组件库，它提供了易于使用的API和灵活的选项，可以适应不同的应用场景。许多Web应用程序可以通过e-ngx-viewer来实现更好的用户体验和更好的性能。如果你正在寻找一种高质量的前端工具，e-ngx-viewer绝对是值得一试的。
示例代码
请参考以下示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ ------------------ -------- - ---- ---------------
------------
--------- ---------------
--------- -
------ --------------
---- ---------- ------------------- ---------------------------- -----------------------------------------------
--
--
------ ----- ----------- -
------------------- -------------- ------------------ --
------- - --- -------------------
--------- ---------------
---------- ---------------------------------------
------------ ------- ---------
---
--------------- -
------------------ ----------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b46c6eb7e50355dbee3