如何在NodeJS中用Cheerio爬取图片src？返回异常问题排查

问题场景 #

爬取IMDB列表页https://www.imdb.com/list/ls008985796/时，通过$(this).find("a img").attr("src")获取的图片地址不符合预期，返回的不是目标图片的真实地址。

现有代码 #

const getHappyMovies = async () => {
  try {
    const movieData = [];
    let title;
    let description;
    let imageUrl;
    const response = await axios.get(happyUrl); //https://www.imdb.com/list/ls008985796/
    const $ = load(response.data);
    const movies = $(".lister-item");
    movies.each(function () {
      title = $(this).find("h3 a").text();
      description = $(this).find("p").eq(1).text();
      imageUrl = $(this).find("a img").attr("src");
      movieData.push({ title, description, imageUrl });
    });
    console.log(movieData);
  } catch (e) {
    console.error(e);
  }
};

当前输出 #

目标页面结构 #

解决步骤 #

1. 修改图片属性获取逻辑：IMDB为优化加载，会把真实图片地址存放在data-src属性中，src仅作为占位图地址。将获取图片地址的代码替换为：

imageUrl = $(this).find("a img").attr("data-src") || $(this).find("a img").attr("src");

如果data-src存在则取该值，不存在则 fallback 到src，确保拿到有效地址。

2. 添加请求头规避反爬：IMDB有反爬机制，建议在axios请求中加入合法的User-Agent，模拟浏览器请求：

const response = await axios.get(happyUrl, {
  headers: {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
  }
});

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