使用 Unsplash API 添加精美图片

也许您知道 Unsplash？我敢打赌它是目前最受欢迎的图片素材网站，主要有以下两个原因

网站上的所有图片都非常漂亮
所有图片完全免费，即使用于商业用途。您无需征求许可，甚至无需署名（尽管这样做会受到赞赏）。

但您可能不知道的是：Unsplash 有一个 API，而且它是 **无限** 和 **免费** 的。简单来说：它就是您希望它成为的样子。一个非常简洁、文档齐全、性能良好的 JSON API，可以为您提供带有元数据的图片 URL。

您将如何使用 Unsplash API？

在 Unsplash 的开发者区域中有很多示例，从 Medium 到 Squarespace 到 Trello，但这里是我的另一个最爱！

我每天都在使用 Notion。它是一款非常适合笔记记录、规划和各种用途的应用程序。它的一项功能是为你在其中创建的每个文档提供自定义图片标题。这些图片为文档增添了鲜明的个性。Notion 提供了一些可供选择的图片，或者你可以上传自己的图片。**或者，你可以直接在 Unsplash 上搜索图片！**

它是如何工作的？让我先向您展示一下

他们使用 Unsplash API 来实现它，并且这里有一篇关于此内容的文章。API 中有一个搜索端点，这使得它很容易实现。

例如，您将访问类似这样的 URL：

https://api.unsplash.com/search/photos?page=1&query=SEARCH_QUERY

然后您将获得类似这样的 JSON 数据：

{
  "total": 133,
  "total_pages": 7,
  "results": [
    {
      "id": "eOLpJytrbsQ",
      "created_at": "2014-11-18T14:35:36-05:00",
      "width": 4000,
      "height": 3000,
      "color": "#A7A2A1",
      "likes": 286,
      "liked_by_user": false,
      "description": "A man drinking a coffee.",
      "user": {
        "id": "Ul0QVz12Goo",
        "username": "ugmonk",
        "name": "Jeff Sheldon",
        "first_name": "Jeff",
        "last_name": "Sheldon",
        "instagram_username": "instantgrammer",
        "twitter_username": "ugmonk",
        "portfolio_url": "http://ugmonk.com/",
        "profile_image": {
          "small": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=7cfe3b93750cb0c93e2f7caec08b5a41",
          "medium": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=5a9dc749c43ce5bd60870b129a40902f",
          "large": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=32085a077889586df88bfbe406692202"
        },
        "links": {
          "self": "https://api.unsplash.com/users/ugmonk",
          "html": "http://unsplash.com/@ugmonk",
          "photos": "https://api.unsplash.com/users/ugmonk/photos",
          "likes": "https://api.unsplash.com/users/ugmonk/likes"
        }
      },
      "current_user_collections": [],
      "urls": {
        "raw": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",
        "full": "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",
        "regular": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=92f3e02f63678acc8416d044e189f515",
        "small": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=263af33585f9d32af39d165b000845eb",
        "thumb": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=8aae34cf35df31a592f0bef16e6342ef"
      },
      "links": {
        "self": "https://api.unsplash.com/photos/eOLpJytrbsQ",
        "html": "http://unsplash.com/photos/eOLpJytrbsQ",
        "download": "http://unsplash.com/photos/eOLpJytrbsQ/download"
      }
    },
    // more photos ...
  ]
}

因此，要在像 Notion 这样的应用程序中提供搜索体验，您将需要一个小型的搜索表单，当用户提交搜索查询时，您将使用用户输入的值来访问 API，然后使用 response.results.urls.thumb 来循环遍历 response.results，以显示返回的图片。如果用户选择了一张图片，您可以使用更高分辨率的 URL 来进行操作，并可以访问所有图片的元数据。

**热提示！** 图片的 URL 是动态的，这意味着您可以通过 URL 参数来调整大小、裁剪、以不同的格式提供以及甚至更改压缩质量。例如，更改大小就像使用 &w=200 一样。

这正是我们在 CodePen 上所做的事情

CodePen Pen 编辑器的目的是提供一个在线代码编辑器，使您能够轻松地为网络编写代码，保存代码并分享代码。图片是网络的重要组成部分，因此您很可能希望在 Pen 中使用精美的图片。我们自己在 CodePen 上提供了资产托管作为 PRO 功能，但我们也为所有人免费提供 Unsplash 图片！

来看看它是如何工作的

React 中的基本示例

让我们创建一个搜索 <form>，当提交时，它会访问 Unsplash API 并返回一堆图片。
我们将使用 Superagent 来进行 Ajax 操作，以使其更加轻松。
我们将跟踪当前搜索查询和返回的数据的状态。

这里就是它工作的方式！

您将如何在自己的应用程序中使用它？

您的应用程序是否允许用户创建任何内容？如果是，这些内容是否可以通过精美的图片得到增强？例如，封面图片、背景图片、博客文章图片等。查看现有合作伙伴以获取更多创意。
这可以成为头像选择体验的一部分吗？
也许您可以构建一个插件，通过允许更快速地访问图片来增强一些现有的应用程序。

欢迎您在评论区分享更多创意，或者分享您如何使用 API。如果您还没有使用过，可以尝试一下。