简介
npm是目前常用的包管理工具之一。当需要在前端项目中调用外部资源时，可以使用npm包来管理这些外部资源。本篇文章将介绍如何使用npm包unsplash-svc来调用unsplash提供的高质量图片。
unsplash-svc
unsplash-svc是一个轻便的npm包，用于调用unsplash提供的api获取高质量的图片。使用unsplash-svc前需要生成access key，可以在unsplash提供的开发者页面上生成。
步骤
1. 安装unsplash-svc包
在终端中输入以下命令安装unsplash-svc：
--- ------- ------------
2. 在js文件中引入unsplash-svc
在需要使用unsplash-svc的js文件中引入unsplash-svc：
----- - ----------- - - ------------------------ ----- ----------- - --- -------------------------------
需要将'your-access-key'替换成自己生成的access key。
3. 使用unsplash-svc获取图片数据
使用unsplash-svc可以根据关键词、类别等条件获取图片数据。
以下是根据keyword获取图片数据的示例代码：
----- -------- ------------------- - ----- --- - ----- ------------------------------------ --- --- ------ ---- -
函数getPhotoByKeyword的第一个参数为关键词，如'dog'；第二个参数为每页返回的数据数目，如30；第三个参数为页数，如1。
4. 处理返回的数据
unsplash-svc返回的数据为json格式，需要进行相关的处理后才能在前端中展示图片。
以下是获取数据并将json数据转为数组的示例代码：
-------------------
----------- -- -----------
------------ -- -
----- --------- - -------------
-- ------ --- --------- -----------
-----------------------
---运行示例代码，会在终端中输出处理后的数组数据。
总结
在前端开发中，使用npm包可以方便地调用外部资源。使用unsplash-svc可以轻松地获取unsplash提供的高质量图片，方便地嵌入到网站中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/151995