如何提取HTML中的图片_源码与资源抓取方法【技巧】

提取网页图片原始地址有五种方法：一、用浏览器开发者工具手动查img标签src；二、用正则匹配HTML中src属性；三、用BeautifulSoup解析DOM并处理data-src；四、用Selenium/Playwright处理JS动态加载；五、提取CSS background-image中的URL。

如果您需要从网页中提取图片，但不确定如何定位和获取图片的原始地址，则可能是由于HTML结构复杂或图片通过JavaScript动态加载。以下是提取HTML中图片源码与资源抓取的具体方法：

一、使用浏览器开发者工具手动提取

该方法适用于静态HTML页面，可直接查看DOM中标签的src属性值，快速定位原始图片地址。

1、在网页上右键选择“检查”或按F12打开开发者工具。

2、点击左上角的“选择元素”图标（箭头形状），然后将鼠标悬停在目标图片上。

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

3、在Elements面板中定位到对应的标签，找到src属性内容。

4、右键点击src属性值，选择“Open in new tab”验证图片可访问性。

5、复制src属性中的完整URL，该URL即为图片原始资源地址。

二、使用正则表达式匹配img标签src属性

该方法适用于已获取HTML字符串文本的场景，通过模式匹配快速提取所有图片链接，适合批量处理本地保存的HTML文件。

1、将HTML源码保存为纯文本文件或读入程序变量。

2、编写正则表达式：]+src=[\"']([^\"']*)[\"'][^>]*>。

3、对HTML文本执行全局匹配，捕获第一个捕获组中的内容。

4、对每个匹配结果进行URL规范化处理，将相对路径转换为绝对路径。

5、过滤掉data:image/开头的Base64编码图片（如需提取则另作处理）。

三、使用Python BeautifulSoup解析DOM结构

该方法基于HTML语法树解析，能准确识别嵌套结构与属性，避免正则误匹配，适用于含复杂class、script或noscript包裹的页面。

1、安装依赖：pip install beautifulsoup4 requests。

2、使用requests.get()获取网页响应内容，并指定response.encoding为'utf-8'。

晓象AI资讯阅读神器

晓象-AI时代的资讯阅读神器

72

查看详情

3、用BeautifulSoup(response.text, 'html.parser')初始化解析器。

4、调用soup.find_all('img')获取全部img标签对象。

5、遍历结果，对每个tag获取tag.get('src')或tag.get('data-src')（适配懒加载）。

6、对非空且不以#开头的src值，用urllib.parse.urljoin(base_url, src)补全绝对路径。

四、处理JavaScript动态渲染图片

该方法针对Vue、React等框架生成的页面，或使用IntersectionObserver、lazyload库延迟加载的图片，其src或data-src初始为空或占位符。

1、使用Selenium或Playwright启动无头浏览器实例。

2、访问目标网页URL，并设置足够等待时间（如time.sleep(3)）或显式等待图片容器出现。

3、执行JavaScript脚本：document.querySelectorAll('img').forEach(img => { if (img.hasAttribute('data-src')) img.src = img.getAttribute('data-src'); });。

4、再次调用get_attribute('src')获取已注入真实地址的img标签。

5、筛选出以http://、https://或//开头的有效URL，排除空白、javascript:void(0)等无效值。

五、提取CSS背景图片URL

该方法用于捕获通过background-image样式设置的图片，常见于轮播图容器、banner区域等未使用标签的视觉元素。

1、在开发者工具的Elements面板中选中疑似含背景图的元素。

2、切换至Styles面板，查找background-image属性值，如url("https://example.com/bg.jpg")。

3、使用正则\burl\([\'\"]?([^\'\")]+)[\'\"]?\)提取括号内地址。

4、若地址为相对路径，需结合当前页面URL进行拼接，注意去除url()外层括号及引号。

5、对@import或CSS文件中引用的图片，需额外请求对应CSS资源并重复本流程解析。

以上就是如何提取HTML中的图片_源码与资源抓取方法【技巧】的详细内容，更多请关注php中文网其它相关文章！