跳到主内容
UniKit

html图像链接提取

只针对 HTML 里的 <img> 标签:取出 src,并把 srcset 按逗号拆成全部候选地址(丢掉 2x / 640w 描述符),可选带 alt 文本、读取 data-src 懒加载地址与去重。

浏览器本地运行所有计算都在你的浏览器里完成,数据不会离开本机。

HTML 源码

图片链接

一行一条,可直接复制。

粘贴 HTML 后即可提取图片链接

img 标签: 0 · 链接: 0 · 去重后: 0 · 来自 srcset: 0

这个工具能做什么

  • 检查响应式图片的 srcset 是否漏掉了某个倍率,或是否还在引用旧域名。
  • 把页面里的图片地址导出来做批量下载或迁移前的清单核对。
  • 配合 data-src 选项,核对懒加载图片在脚本执行前到底指向哪些占位图。

示例

输入

<img src="a.png" srcset="a.png 1x, big.png 2x" alt="封面">
<img src='b.jpg' alt='b'>

输出

a.png
a.png
big.png
b.jpg

srcset 里的每个候选都会被拆出来,2x 之类的描述符会被丢掉。

常见问题

srcset 里的 2x、640w 描述符怎么处理?

会被丢掉,只保留地址。a.png 1x, big.png 2x 会输出两条:a.png 和 big.png,导出的列表可以直接用来下载或比对。

为什么同一个地址出现两次?

因为它在 src 和 srcset 里都出现了。勾选「按链接去重」即可只保留一条;默认不去重是为了让你看清每个属性各自引用了什么。

懒加载图片的地址在哪?

通常在 data-src / data-original 这类属性里,src 只是占位图。勾选「提取 data-src」就会把 data-src 一起输出。

能处理不闭合的 <img> 吗?

可以。img 本来就是空元素,解析器读到 > 就结束,<img src=x> 与 <img src="x" /> 效果相同。

关键词:img 提取srcset 提取html 图片img src懒加载图片data-src响应式图片image src extractor

同类工具