使用Flickr API创建图片画廊时的URL参数传递问题

阿华AIGC实验室

2026-5-11

解决Flickr API图片画廊的几个关键问题

嘿，我刚梳理完你的代码和遇到的问题，第一次玩API踩这些坑太正常了，咱们一个个来搞定：

1. 变量顺序与API调用时机的问题

你遇到的两种URL定义错误，核心原因是变量赋值时机不对：

情况1：你先定义了url模板字符串，但这时候searchWord、perPage这些变量还没被赋值（JS里变量声明会提升，但赋值不会），所以模板里的${searchWord}其实是undefined，Flickr API就自动用了默认参数返回结果。
情况2：虽然变量顺序对了，但页面刚加载时input是空的，你直接document.getElementById('input').value拿到的是空字符串，Flickr的flickr.photos.search不允许无关键词搜索，所以就抛出了那个错误。

解决办法：不要在页面加载时就定义url，而是在用户点击搜索按钮时，再获取输入框的值、组装URL，这样才能拿到用户输入的关键词。

2. `createGallery`函数的遍历与数据结构错误

你的函数里有两个关键问题：

你把整个data传给了createGallery，但Flickr返回的结构是data.photos.photo才是图片数组，直接传data会遍历到无关的属性。
用Object.keys(photos)遍历得到的是数组的索引（字符串形式），不是图片对象本身，所以photo.farm自然是undefined。应该直接遍历图片数组的每一项。

3. 图片URL的模板语法错误

你写的https://farm{${photo.farm}}.staticflickr.com/{${photo.server}}/...多套了一层大括号，正确的模板字符串应该直接用${变量}，不需要额外加{}。另外[mstzb]是尺寸占位符，你需要选一个具体的尺寸（比如c代表中等尺寸），或者保留占位符但语法要对。

修正后的完整代码

HTML（仅补充占位符提示）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flickr Gallery</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <input type="text" id="input" placeholder="输入关键词搜索">
    <button id="search">Go</button>
    <ul id="gallery"></ul>
  </main>
  <script src="script.js"></script>
</body>
</html>

JavaScript（核心修改点都在这里）

// 获取DOM元素
const input = document.getElementById('input');
const searchBtn = document.getElementById('search');
const gallery = document.getElementById('gallery');
const API_KEY = 'XXXXXXXXXXXXXX'; // 替换成你的API Key

// 创建画廊的函数
function createGallery(photos) {
  // 先清空之前的画廊内容，避免重复加载
  gallery.innerHTML = '';
  
  for (let photo of photos) {
    const imgElem = document.createElement('li');
    // 修正图片URL的模板语法，选一个具体尺寸比如'c'（中等大小）
    imgElem.innerHTML = `<img src="https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}_c.jpg" alt="Flickr photo">`;
    imgElem.setAttribute('img-id', photo.id);
    gallery.append(imgElem);
  }
}

// 异步获取Flickr数据的函数
async function fetchFlickrPhotos(searchWord, perPage = 50, page = 1) {
  // 点击搜索时才组装URL，确保拿到有效的关键词
  const url = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=${API_KEY}&text=${searchWord}&per_page=${perPage}&page=${page}&format=json&nojsoncallback=1`;
  
  try {
    const response = await fetch(url);
    const data = await response.json();
    
    if (data.stat === 'ok') {
      // 传入正确的图片数组：data.photos.photo
      createGallery(data.photos.photo);
    } else {
      console.error('API请求失败:', data.message);
    }
  } catch (error) {
    console.error('网络请求出错:', error);
  }
}

// 绑定搜索按钮的点击事件
searchBtn.addEventListener('click', () => {
  const searchWord = input.value.trim();
  if (!searchWord) {
    alert('请输入搜索关键词');
    return;
  }
  // 调用获取数据的函数
  fetchFlickrPhotos(searchWord);
});

// 可选：支持回车触发搜索
input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    searchBtn.click();
  }
});