在Node.js中从Imgur帖子链接提取图片URL：修复X-ray代码或寻找替代方案

首先，你遇到的问题核心原因是现在Imgur的相册页面采用动态渲染——x-ray这类静态HTML抓取工具只能获取页面初始加载的静态内容，而图片资源是后续通过JavaScript动态加载的，所以返回空数组是必然的结果。下面给你两种可靠的解决方案：

方案一：使用Imgur官方API（推荐） #

这是最稳定的方式，官方API专门提供了相册内容查询接口，完全不依赖页面结构的变化，也不会因为网站更新而失效。

步骤说明： #

1. 前往Imgur开发者平台免费申请一个API客户端ID（流程简单，几分钟就能完成）
2. 在Firebase Cloud Functions中发起API请求获取相册图片

示例代码：

const functions = require("firebase-functions");
const axios = require("axios"); // 先执行 npm install axios 安装依赖

exports.getImgurLink = functions.https.onCall(async (data, context) => {
  const albumId = "1QEKZ2f"; // 从你的相册链接中提取的唯一ID
  const clientId = "YOUR_IMGUR_CLIENT_ID"; // 替换成你申请到的客户端ID

  try {
    const response = await axios.get(`https://api.imgur.com/3/album/${albumId}`, {
      headers: {
        Authorization: `Client-ID ${clientId}`
      }
    });

    // 提取所有图片的直接访问URL
    const imageUrls = response.data.data.images.map(img => img.link);
    return { success: true, images: imageUrls };
  } catch (error) {
    functions.logger.error("获取Imgur相册内容失败", error);
    return { success: false, error: error.message };
  }
});

方案二：使用Puppeteer处理动态渲染页面 #

如果不想依赖官方API，可以用Puppeteer模拟真实浏览器加载页面，等待动态内容完全渲染后再抓取图片URL。注意Firebase Cloud Functions运行Puppeteer需要配置特定启动参数。

示例代码：

const functions = require("firebase-functions");
const puppeteer = require("puppeteer"); // 先执行 npm install puppeteer 安装依赖

exports.getImgurLink = functions.https.onCall(async (data, context) => {
  let browser;
  try {
    // 启动无头浏览器，适配Cloud Functions环境
    browser = await puppeteer.launch({
      args: ["--no-sandbox", "--disable-setuid-sandbox"]
    });
    const page = await browser.newPage();
    // 等待网络空闲，确保页面动态内容加载完成
    await page.goto("https://imgur.com/a/1QEKZ2f", { waitUntil: "networkidle2" });

    // 在页面上下文里抓取图片的src属性
    const imageUrls = await page.evaluate(() => {
      const imgElements = document.querySelectorAll(".image-placeholder img");
      return Array.from(imgElements).map(img => img.src);
    });

    return { success: true, images: imageUrls };
  } catch (error) {
    functions.logger.error("抓取Imgur页面失败", error);
    return { success: false, error: error.message };
  } finally {
    // 确保浏览器实例关闭
    if (browser) await browser.close();
  }
});

补充：为什么你的x-ray代码失效？ #

你参考的旧帖子方法当时有效，是因为那时候Imgur的相册页面是静态渲染的，.image-placeholder元素里直接包含图片URL。但现在Imgur改用了React这类前端框架做动态渲染，初始HTML里只有空的占位符结构，图片资源是后续通过JS异步加载的，所以x-ray这类静态抓取工具根本无法获取到动态生成的图片元素。

希望这两种方法能帮你解决问题！

内容的提问来源于stack exchange，提问作者Friendly Mushroom