简介
在前端开发中，我们时常需要向用户展示图片，但是找到合适的图片并下载下来并不是一个容易的任务。Microsoft 提供了一个强大的图像搜索引擎——Bing 图像搜索引擎，能够搜索到数量巨大的优质图片资源。此外，他们也提供了一个npm包——bing-image-search-stream，使得我们能够方便地在前端项目中使用 Bing 图像搜索引擎。
安装
首先，您需要使用 npm 命令进行安装：
npm install bing-image-search-stream
使用
接下来，我们演示一下如何使用 bing-image-search-stream 进行图像搜索并展示到网页中。
1. 引入包
在您的项目中引入 bing-image-search-stream 包：
const bingImageSearch = require('bing-image-search-stream');2. 获取 API 密钥
前往Microsoft Azure创建一个 Cognitive Services 帐户，分配 Bing 图像搜索服务 API 密钥。
3. 搜索图片
使用以下代码段实现在 Bing 图像搜索引擎上搜索图片：
-- -------------------- ---- -------
----- --------------- - ------------------------------------
----- ------- - -------------------
----- ----------- - -------
----- ------- - ---------------
-------------------------
-------- ------------
--------------- - --------
--------------- -
-------- -
---------------------------- -------
--
------- ------
----- -----
---- -------------------------------------------------------------
-
---
----------- -------- -- -
---------------------------------
-------------- ----- -- -
-----------------
---通过上述代码段中设置query参数，在此处搜索到了包含辉瑞疫苗搜索词的图片。返回的结果中包括图片的 URL 地址。您可以根据需求调用这些 URL 地址进行图片展示。
4. 图片展示
可以使用以下代码段处理前面获取的图像 URL：
-- -------------------- ---- -------
----- --------------- - ------------------------------------
----- ------- - -------------------
----- ----------- - -------
----- ------- - ---------------
-------------------------
-------- ------------
--------------- - --------
--------------- -
-------- -
---------------------------- -------
--
------- ------
----- -----
---- -------------------------------------------------------------
-
---
----------- -------- -- -
----- --- - ------------------------------
------- - --------------------
------------------------------------------------
-------------- ----- -- -
-----------------
---这样，您就可以将 Bing 图像搜索引擎返回的图片展示到您的网页中了。
结论
在此，我们已经了解了如何使用 bing-image-search-stream 包在前端项目中方便地使用 Bing 图像搜索引擎。不仅如此，之后我们还可以通过 Bing 图像搜索引擎的更多功能，如图片类型、颜色 和尺寸等等来提高我们搜索图片的准确度。希望你在了解了这个 API 后能够在你的下一个前端项目中也能顺利使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006737a890c4f727758412a