Unsplash Source 使用教程

Unsplash Source 是 Unsplash 提供的免费图片 API 服务，无需复杂权限即可快速获取高清图片，适用于网页背景、应用开发、设计素材等场景。以下是详细使用指南：

一、基础使用

获取随机图片

直接访问 https://source.unsplash.com/random，API 会返回一张随机图片的 URL。
示例：

<img src="https://source.unsplash.com/random" alt="随机图片">

指定图片尺寸

在 URL 中添加 {宽度}x{高度} 参数，如 https://source.unsplash.com/random/800x600。

注意：若原图比例不符，Unsplash 会自动裁剪图片。

保持比例缩放

若只需固定宽度或高度，另一维度设为 0，例如 https://source.unsplash.com/random/800x0 会生成宽度为 800 像素、高度按比例缩放的图片。

按关键词搜索

在 URL 后添加 ?{关键词}，支持多关键词用逗号分隔：

<img src="https://source.unsplash.com/800x0/?nature,sunset" alt="自然与日落">

指定作者图片

使用 /user/{用户名} 获取特定摄影师的作品：

<img src="https://source.unsplash.com/user/devonshiremedia/800x0" alt="指定作者图片">

二、高级功能

固定图片（每日/每周更新）

在 URL 后添加 /daily 或 /weekly，图片每天/每周刷新：

<img src="https://source.unsplash.com/daily/800x0" alt="每日更新图片">

指定图片 ID

复制图片页面的 ID（如 oXTwc5USeDQ），直接调用：

<img src="https://source.unsplash.com/oXTwc5USeDQ/800x0" alt="指定图片">

联合参数使用

组合尺寸、关键词和作者参数：

<img src="https://source.unsplash.com/random/900×700/?fruit" alt="水果主题图片">

三、开发者 API 集成（需注册）

注册与获取 API Key

访问 https://unsplash.com/developers，注册账号并创建应用以获取 Access Key。
PHP 示例代码

require 'vendor/autoload.php';
use Unsplash\Unsplash;
 
$accessKey = 'YOUR_ACCESS_KEY';
$unsplash = new Unsplash(['accessKey' => $accessKey]);
 
// 搜索关键词为 "travel" 的图片
$searchResults = $unsplash->searchPhotos(['query' => 'travel', 'per_page' => 20]);
foreach ($searchResults->getResults() as $photo) {
    echo '<img src="' . $photo->getUrls()['small'] . '">';
}
JavaScript 库（Unsplash Source JS）
使用 https://gitcode.com/gh_mirrors/un/unsplash-source-js 简化调用：
javascript
const unsplash = new UnsplashSource({ accessKey: 'YOUR_ACCESS_KEY' });
unsplash.image('nature', 800, 600)
  .then(url => {
      document.getElementById('image').src = url;
  });

四、应用场景

网页背景

动态切换高清背景，提升页面视觉效果：

body {
    background: url('https://source.unsplash.com/random/1920x1080') no-repeat center center fixed;
}

博客/文章插图

根据内容自动匹配相关图片，增强可读性。

设计工具

快速获取高质量占位图或灵感素材。

五、注意事项

遵守使用条款

图片可用于个人和商业项目，但需保留归属信息（如作者链接）。

API 限制

免费版 API 请求频率有限（如每小时 50 次），高流量项目需申请开发者 API。

错误处理

添加异常捕获机制，处理网络错误或无效请求：

fetch('https://source.unsplash.com/random')
  .catch(error => console.error('图片加载失败:', error));

通过以上步骤，您可轻松将 Unsplash Source 集成到项目中，获取高质量免费图片资源。