首先定位html中的img标签并提取src属性，使用beautifulsoup或lxml等工具解析文档；接着将相对路径通过urljoin与根域名拼接为完整URL；同时检查css的background-image和javaScript动态加载内容，可借助Puppeteer或Selenium处理SPA页面；最后过滤含tracker、pixel等关键词的无效图及base64小图，按.jpg、.png等常见格式筛选有效图片资源。

从HTML数据中提取图片资源是网页抓取、内容分析或网站迁移中的常见需求。关键在于准确识别和解析HTML中的图片标签及其属性，同时处理相对路径与动态加载的情况。

定位img标签并获取src属性

HTML中的图片通常通过 <img> 标签嵌入，核心属性是 src，它指向图片的实际URL。最基本的方法是使用HTML解析工具（如python的BeautifulSoup、lxml或javascript的dom操作）遍历所有img元素，提取其src值。

示例操作步骤：

• 读取HTML源码或响应内容
• 解析文档结构，查找所有 <img src="..."> 标签
• 逐个提取 src 属性值，构成图片URL列表

处理相对路径与域名拼接

很多HTML中的图片链接是相对路径（如 /images/logo.png 或 ../assets/photo.jpg），无法直接访问。必须将其转换为完整的绝对URL。

解决方法：

• 确定原始网页的根域名（如 https://example.com）
• 使用URL库（如Python的urljoin）将相对路径与基础URL合并
• 确保最终地址可访问，避免遗漏协议（http/https）

识别隐藏在CSS或JavaScript中的图片

现代网页常通过CSS背景图或JavaScript动态插入图片，这些不会出现在标准img标签中，容易被忽略。

立即学习“前端免费学习笔记（深入）”；

应对策略：

• 检查元素的 style 属性中是否包含 background-image: url(...)
• 分析CSS文件内容，提取所有url()引用的图像资源
• 对于SPA类页面，考虑使用无头浏览器（如Puppeteer、Selenium）渲染页面后再提取

过滤无效或占位符图片

抓取结果中可能包含追踪像素、空白gif或重复图标。可通过规则过滤提升质量。

常用过滤条件：

• 排除src包含“tracker”、“pixel”、“blank”等关键词的图片
• 跳过base64编码的小图（data:image/png;base64,…）若不需要本地化存储
• 根据文件扩展名筛选常见格式（.jpg, .jpeg, .png, .webp, .gif）

基本上就这些。只要理清HTML结构，结合路径处理和动态内容加载机制，就能较完整地获取页面中的图片资源。不复杂但容易忽略细节。