分类

← View All Tools

图片源地址提取器

从HTML源代码中提取图片URL（src属性）。支持懒加载图片和srcset属性。

同时也从data-src属性提取（懒加载图片）

同时也从srcset属性提取（响应式图片）

从结果中删除重复的图片URL

选择如何排序提取的图片URL

关键信息

分类
Text Processing
输入类型
textarea, checkbox, select
输出类型
json
样本覆盖
4
支持 API
Yes

概览

图片源地址提取器是一款高效的网页解析工具，能够从复杂的HTML源代码中快速抓取所有图片URL。它不仅支持标准的src属性，还能智能识别并提取用于懒加载的data-src属性以及响应式图片srcset属性，帮助用户轻松获取网页资源列表。

适用场景

  • •需要从网页源代码中批量获取所有图片链接进行备份或分析时。
  • •在处理包含懒加载（Lazy Loading）或响应式图片的复杂网页时。
  • •需要整理网页素材并剔除重复图片地址以进行后续开发或设计工作时。

工作原理

  • •将目标网页的HTML源代码粘贴到输入框中。
  • •根据需求勾选“包含data-src”或“包含srcset”选项，以捕获更多类型的图片链接。
  • •选择是否开启“去重”功能以及排序方式，点击执行即可获得清晰的URL列表。

使用场景

网页设计师快速收集特定页面的所有图片资源进行素材整理。
前端开发人员在调试网页图片加载逻辑时，快速核对图片路径是否正确。
SEO优化人员通过提取图片链接，检查网页图片是否配置了正确的资源路径。

用户案例

1. 批量提取电商页面商品图

电商运营
背景原因
运营人员需要将某商品详情页的所有展示图提取出来，用于制作推广海报，但页面图片较多且包含懒加载。
解决问题
手动右键保存图片效率极低，且难以获取所有图片地址。
如何使用
将商品详情页的HTML源码粘贴至工具，勾选“包含data-src”选项，点击提取。
示例配置
includeDataSrc: true, uniqueOnly: true, sortBy: 'alphabetical'
效果
获得了一份包含所有商品图片URL的去重列表，可直接批量下载。

2. 响应式图片资源审计

前端工程师
背景原因
工程师需要检查网站首页是否正确配置了不同分辨率下的srcset图片资源。
解决问题
直接查看源代码难以直观对比所有响应式图片的路径。
如何使用
粘贴首页HTML源码，勾选“包含srcset”选项，执行提取。
示例配置
includeSrcSet: true, uniqueOnly: true, sortBy: 'none'
效果
快速导出了所有srcset属性中的图片链接，方便进行资源路径的核对与审计。

用 Samples 测试

html, image, video
Markdown 链接提取示例
包含各种链接类型的 Markdown 示例文档，用于测试 Markdown 链接提取工具
title token extractor
image
Web Python 图像处理示例
Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
title token image
image
Windows C++ 图像处理示例
Windows C++ 图像处理示例，包括读取/保存图像、调整大小和使用Windows Imaging Component进行格式转换
title token image
image
macOS Swift 图像处理示例
macOS Swift 图像处理示例，包括图像加载/保存、过滤和转换
title token image
image

相关专题

HtmlConvert工具专题
探索 11 个围绕 html 的 convert 工作流工具，快速找到相近能力。
ImageConvert工具专题
探索 100 个围绕 image 的 convert 工作流工具，快速找到相近能力。
VideoConvert工具专题
探索 36 个围绕 video 的 convert 工作流工具，快速找到相近能力。
Image 工具专题
探索 40 个围绕 image 的 utility 工作流工具，快速找到相近能力。

常见问题

该工具支持提取哪些属性的图片链接？

默认提取标准的src属性，同时支持勾选提取data-src（懒加载）和srcset（响应式）属性。

提取结果是否会自动去重？

是的，工具内置了去重选项，开启后会自动删除重复的图片URL，确保结果列表的唯一性。

我可以对提取出的URL进行排序吗？

可以，您可以选择“不排序”以保持原始顺序，或选择“字母顺序”进行A-Z排列。

该工具是否需要联网才能运行？

不需要，该工具在本地处理您粘贴的HTML代码，不会向服务器发送任何请求，确保数据隐私。

如果HTML代码非常长，处理会有性能限制吗？

该工具针对文本处理进行了优化，能够高效处理常见的网页源代码片段，但建议避免一次性粘贴过大的完整网页文档。

API 文档

请求端点

POST /zh/api/tools/image-source-extractor

请求参数

参数名 类型 必填 描述
htmlCode textarea 是 -
includeDataSrc checkbox 否 同时也从data-src属性提取（懒加载图片）
includeSrcSet checkbox 否 同时也从srcset属性提取（响应式图片）
uniqueOnly checkbox 否 从结果中删除重复的图片URL
sortBy select 否 选择如何排序提取的图片URL

响应格式

{
  "key": {...},
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
JSON数据: JSON数据

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-image-source-extractor": {
      "name": "image-source-extractor",
      "description": "从HTML源代码中提取图片URL（src属性）。支持懒加载图片和srcset属性。",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=image-source-extractor",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]