如何在React HTML中从URL获取新闻文章缩略图？

为什么<link>标签无效 #

<link>标签的作用是关联外部资源（如样式表、网站图标等），并不具备生成页面缩略图的能力，所以无法实现你的需求。

可行的解决方法 #

1. 提取文章页面的OG（Open Graph）图片 #

CNBC的文章页面都会嵌入Open Graph元数据，其中包含了官方提供的文章缩略图地址。你可以通过以下步骤获取：

• 后端请求目标文章URL对应的HTML内容
• 解析HTML，提取<meta property="og:image" content="图片地址">标签里的content值
• 把这个图片地址直接用作缩略图的src属性

2. 后端生成页面截图 #

通过后端工具对文章页面进行截图，生成自定义尺寸的缩略图：

• 可以使用Puppeteer（Node.js）这类无头浏览器工具，示例代码思路：

  const puppeteer = require('puppeteer');
  
  async function getArticleThumbnail(url) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url, { waitUntil: 'networkidle2' });
    // 截取页面顶部区域作为缩略图
    const screenshotBuffer = await page.screenshot({
      clip: { x: 0, y: 0, width: 320, height: 180 },
      type: 'jpeg'
    });
    await browser.close();
    // 将截图上传至存储服务，返回图片访问URL
    return uploadToStorage(screenshotBuffer);
  }
  

• 也可以调用第三方截图API（如ThumbnailAPI等），传入文章URL和尺寸参数，直接获取缩略图地址。

3. 前端间接调用截图服务（需后端配合） #

如果想在前端实现，需要后端作为中间层转发请求：

• 前端把文章URL传给后端接口
• 后端调用截图服务生成图片，返回图片地址给前端
• 前端使用该地址渲染缩略图

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