前言
在前端开发中，我们常常需要使用图片资源。然而，使用 Google Images 等搜索引擎往往会浪费大量的时间和精力，而使用知名的图片网站，如 Unsplash，需要自己在网站上面进行搜索、下载等繁琐的操作。
为了解决这一问题，我们可以使用 npm 包 unsplash-source-node-js，轻松地在我们的项目中使用 Unsplash 精美的图片资源。
安装
使用 npm 可以轻松安装该包：
--- ------- ----------------------- ------
使用
注册 Unsplash 应用
首先，我们需要在 Unsplash 网站上注册开发者账户，创建一个应用程序（Application），并且获取 access key。过程非常简单，具体可以参考 Unsplash API 官方文档。
初始化模块
在我们的项目中导入 unsplash-source-node-js 第三方模块，初始化模块并配置 access key：
----- -------- - -----------------------------------
----- -------- - --- ----------
---------- -----------------
---搜索图片
搜索图片一般需要传递一个参数，参数命名为 query。我们可以设置搜索返回结果的数量、图片尺寸等属性。
-----------------
------ ------
-------- ---
------------ ------------
----- ---------
-------------- -- -
------------------
-------------- -- -
-------------------
---获取图片详情
我们也可以获取 Unsplash 上某张图片的详细信息。
-------------------------------------------- -- -
------------------
-------------- -- -
-------------------
---随机获取图片
我们还可以使用随机图片的功能。这里的随机可以是全局随机（当我们不传任何参数）或者限定特定关键字内的随机：
------
-------------------------------- -- -
------------------
-------------- -- -
-------------------
---
-------------
------------------------------------- -- -
------------------
-------------- -- -
-------------------
---示例代码
以下是一个简单的示例代码，可以从 Unsplash 上获取 3 张关于猫的横向普通尺寸（"lanscape"）的图片，并显示在页面上。
--------- -----
------
------
--------------- ---------------
-------
------
---- ---------------------
------- -------------------------------------------------------------------------------------------
--------
----- -------- - -----------------------------------
----- -------- - --- ----------
---------- -----------------
---
-----------------
------ ------
-------- --
------------ ------------
----- ---------
-------------- -- -
----- --------- - -------------------------------------
-------------------- -- -
----- --- - ------------------------------
------- - -------------------
------- - ------------------
---------------------------
---
-------------- -- -
-------------------
---
---------
-------
-------总结
使用 unsplash-source-node-js 可以帮助我们轻松地使用 Unsplash 上的图片资源，提高前端开发效率，同时还能让我们的页面更加美观。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668ead9381d61a3540bff