使用Beautiful Soup无法抓取目标图片src的技术求助

问题根源 #

你猜的没错，但display:none属性不影响Beautiful Soup抓取——它只负责页面渲染时是否显示，静态HTML里只要存在这个标签，Beautiful Soup就能抓到。真正的问题是：这三张图片是通过JavaScript动态插入到DOM里的，你用requests这类工具获取的静态HTML里根本没有这些img标签，所以Beautiful Soup自然找不到。

验证方法 #

你可以直接在浏览器里查看页面的原始HTML源码（按Ctrl+U，不是开发者工具的Elements面板），搜索目标图片的URL，肯定搜不到——Elements面板里的是JS渲染后的DOM，而requests拿到的是服务器返回的原始静态代码。

解决方案 #

方法1：用浏览器自动化工具（推荐） #

用Selenium或Playwright模拟浏览器加载页面，等JS执行完成后再抓取渲染后的DOM：

Selenium示例代码：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

url = "https://www.acefitness.org/resources/everyone/exercise-library/14/bird-dog/"
driver = webdriver.Chrome()  # 需要提前安装对应浏览器的驱动
driver.get(url)

# 等待图片所在容器加载完成
wait = WebDriverWait(driver, 10)
image_container = wait.until(EC.presence_of_element_located((By.ID, "imageFlicker")))

# 获取所有目标图片地址
imgs = image_container.find_elements(By.TAG_NAME, "img")
for img in imgs:
    print(img.get_attribute("src"))

driver.quit()

Playwright示例代码：

from playwright.sync_api import sync_playwright

url = "https://www.acefitness.org/resources/everyone/exercise-library/14/bird-dog/"
with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto(url)
    # 等待图片元素加载完成
    page.wait_for_selector("#imageFlicker img")
    # 批量获取图片地址
    img_srcs = page.eval_on_selector_all("#imageFlicker img", "elements => elements.map(el => el.src)")
    print(img_srcs)
    browser.close()

方法2：直接抓取数据接口（更高效） #

打开浏览器开发者工具的Network面板，刷新页面，筛选XHR/Fetch请求，你会发现页面加载时会调用接口获取图片数据。直接请求这个接口就能拿到所有图片URL，无需模拟浏览器加载整个页面。

补充说明 #

你之前尝试的所有Beautiful Soup选择器都无效，核心原因是静态HTML里不存在这些目标元素。只有当页面被JavaScript完全渲染后，这些img标签才会出现在DOM结构中，因此必须使用能处理动态渲染的工具。

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