如何提取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'。

标签： css vue react javascript python java html js 正则表达式 编码 浏览器 工具