ngx-holder 是一个前端的 npm 包，它提供了一种简单的方法来生成占位符图片。当我们在开发一个网站或者应用时，经常需要使用占位符图片来占据某些位置，以便于我们在页面布局过程中进行排版。ngx-holder 就是解决这个问题的好工具。
安装
npm install ngx-holder --save
使用
我们可以在组件的模板文件中使用 ngx-holder 来生成占位符图片。下面是一个使用示例：
<ngx-holder [size]="{width:200,height:300}"></ngx-holder>在此示例中，我们使用了 ngx-holder 组件，并设置了图片的尺寸为 200x300 像素。ngx-holder 会自动生成一个占位符图片，将其塞入其中。
在实际应用中，我们还可以设置其他的参数来定制生成的占位符图片。下面是一些常见的选项：
theme: 指定占位符图片的主题，有 "default"、"social" 等多个选项可供选择。text: 指定占位符图片中的文字内容。可以是一个字符串，也可以是一个对象，以便于设置文字的样式、颜色等属性。background: 指定占位符图片的背景颜色。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ------------------
-------------- -------
----
---- ------------
---- -----------------
----------- ------------------- ------------ ----------------------------------
------
---- -----------------
----------- ------------------- ------------ ----------- ------ ----------------------------------
------
---- -----------------
----------- ------------------- ------------ -------------- ----------------------------------
------
------
------
-
--
------ ----- ------------ --在此示例中，我们创建了一个 AppComponent 组件，在其中使用了 ngx-holder 组件来生成占位符图片。我们设置了三个不同的占位符图片，分别指定了不同的尺寸、主题、文字等属性。这样，我们就可以在页面上展示这些占位符图片，方便我们进行页面布局和设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731681e8991b448e949c