在前端开发中，我们经常需要使用占位符图片来填充一些没有真实图片的区域，比如在设计稿中展示图片效果，但实际上还没有准备好图片资源等。这时，我们可以借助一个很方便的 npm 包——holderjs，它能够自动生成漂亮的占位图，并且也支持一些自定义功能。
安装
在开始使用 holderjs 之前，我们需要先在项目中安装它。使用以下命令即可：
npm install holderjs --save-dev
安装完成后，我们就可以引入 holderjs 了。常见的引入方式有以下几种：
方式一：通过 script 标签引入
将 holderjs.min.js 引入即可：
<script src="path/to/holderjs.min.js"></script>
方式二：作为模块引入
如果你的项目使用了打包工具，比如 webpack，可以通过以下方式引入：
import Holder from 'holderjs';
基本使用
holderjs 的基本使用非常简单，我们只需要在需要占位图的元素上添加 data-src 属性即可：
<img data-src="holder.js/300x200" />
这行代码的意思是：生成一张尺寸为 300x200 的占位图，并将其作为 img 元素的 src 属性。
此时如果我们运行页面，就会发现该 img 元素已经生成了一张占位图。
高级用法
holderjs 还提供了一些高级用法，可以让我们更好地控制占位图的生成。
图片主题
holderjs 内置了多种主题，可以使占位图的风格更加多样化，比如“工具栏”、“平面风格”等。我们可以通过设置不同的主题来生成不同类型的占位图。
<img data-src="holder.js/300x200?theme=sky" />
在上面的示例中，我们使用了 sky 主题。
文字
holderjs 允许在占位图中添加文字，更加灵活和自由。
<img data-src="holder.js/300x200?text=Hello" />
在上面的示例中，我们将占位图中间显示了一个 Hello 的文本。
前景和背景颜色
holderjs 支持指定前景和背景颜色，可以更好地适应页面风格。
<img data-src="holder.js/300x200?bg=FFC107&fg=FFFFFF" />
在上面的示例中，我们将占位图的背景色设置为 FF9800，前景色设置为白色。
总结
这就是使用 holderjs 生成占位图的简单教程，在实际开发中，我们可以根据自己的需求来设置不同的属性，生成不同类型的占位图。holderjs 提供了丰富的功能支持，可以帮助我们更加高效地完成页面的开发和测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcca4b5cbfe1ea0612843