介绍
image-placeholder-unsplash 是一个方便使用 Unsplash API 快速生成占位图的 npm 包。在前端开发中，我们常常需要使用占位图来占据空白图片的位置，而通过使用这个包，我们可以快速生成高质量的占位图。
安装
通过 npm 可以非常简单地安装这个包：
npm install image-placeholder-unsplash
使用
在安装了包之后，我们需要先请求 Unsplash API 的 Access Key。在完成这一步骤之后，便可以轻松生成占位图。
初始化
首先需要初始化，可以创建一个 UnsplashAPI.js 文件，然后在其中加入如下代码：
-- -------------------- ---- ------- ------ ------------------------ ---- ---------------------------- ----- -------------- - - ---------- ---------------------- - ----- ---------------------- - - --------------- -------------------------------- - ----- -------- - --- ------------------------- --------------- ---------------------- - ------ ------- --------
生成占位图
生成占位图非常简单，使用到了当下较为流行的 ES6 async/await 方法。下面的示例代码生成了一张宽度为 1024，高度为 768 的随机占位图：
-- -------------------- ---- -------
------ ----------- ---- -------------
----- -------- ------------------- -- -
----- --- - ----- --------------------------------
-
------ -----
------- ----
-
-
----------------
-
---------------------同时，generatePlaceholder 方法也可以接收一些可选参数，让你更加自由地设定占位图的样式：
-- -------------------- ---- -------
----- -------- ------------------- -- -
----- --- - ----- --------------------------------
-
------ -----
------- ----
----- ---
---------- -----
------ -----
-
-
----------------
-总结
本文介绍了如何通过使用 npm 包 image-placeholder-unsplash 快速生成占位图。这个包的应用非常广泛，不只是在开发中用来填补空白区域，而且还可以作为一种 API 调用测试的方式。如果你想进一步了解 Unsplash API，可以访问官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005541381e8991b448d16c9