在前端开发中,我们往往需要使用占位符图片来填充项目中的空白图片区域,这个时候,就可以使用 Holder.js 这个工具。
在 Angular 2 项目中,可以使用 angular2-holderjs 这个 npm 包来集成 Holder.js,本文将详细介绍如何使用 angular2-holderjs。
安装
首先,需要在项目中引入 angular2-holderjs 包,通过以下命令进行安装:
npm install angular2-holderjs --save
引入模块
接下来,需要在需要使用 Holder.js 的模块中引入该模块:
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - -------------- - ---- -------------------- ----------- -- --- -------- - -- --- -------------- - -- ------ ----- ---------- - -
使用 Holder.js
在 HTML 中使用 Holder.js 的语法格式如下:
<img src="holder.js/[width]x[height]/[background-color]/[text-color]?[theme]">
其中:
[width]
和[height]
表示图片的宽度和高度;[background-color]
表示图片的背景颜色;[text-color]
表示图片上的文字颜色;[theme]
表示主题,可以使用industrial
,sky
,vine
,lava
,gray
,ocial
,sunrise
,sea
,pastel
,candy
这些主题。
通过 angular2-holderjs,我们可以使用组件来构建 Holder.js 图片,而且更容易读懂和维护。
-- -------------------- ---- ------- ------------- ----------- ---- -- ------- ------------- ---------------- ---- -------- ---- ---------------- ---------------- -------------------- --------------------- ----------- -- --------------- ------------ -------- ---- ----------- ----- ------- ----- ---- -- -------------------------------- -------------- ---------------
在上述代码中,我们使用 ng-container
来循环遍历每个图片的数据,检查是否存在 src
属性,如果存在则表示该图片的数据可用,直接渲染。如果不存在,则表示该图片数据不可用,使用 Holder.js 来生成一个占位符作为替代。
其中 [holder]
属性表示使用 Holder.js 插件生成图片,size
指定图片大小为 100%,auto
表示根据图片大小自动调整。由于 Holder.js 是通过创建 div
元素的方式生成占位符图片,需要设置样式 item-image
来保证图片样式与其他图片一致。
示例代码
完整示例代码如下:
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- - ------------- ----------- ---- -- ------- ------------- ---------------- ---- -------- ---- ---------------- ---------------- -------------------- --------------------- ----------- -- --------------- ------------ -------- ---- ----------- ----- ------- ----- ---- -- -------------------------------- -------------- --------------- -- ------- -- ----------- - ----------------- -------- ------- --- ----- ----- -------- ----- - -- -- ------ ----- ------------ - ----- - - - ---- ----------------------------------------------------------- ---- ------- ------ ----- ----- -- - ---- --- ---- ------ --- ----------- ------ ------ --- ---------- -- - ---- ---------------------------------------------------------- ---- ------ ------ ---- ----- - -- -
在该例子中,我们展示了三个图片,其中第一个和第三个图片可用,第二个图片不可用,使用 Holder.js 生成了一个占位符图片。
总之,angular2-holderjs 是使用 Holder.js 的好方法,它使得在 Angular 2 项目中使用 Holder.js 比原来更容易、更清爽。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600554da81e8991b448d20e2