当前位置：首页 > 行业动态 > 正文

html提取图片

admin
行业动态
2025-04-30
2

通过解析HTML中的标签并提取其src属性即可批量获取网页图片资源（需注意相对

HTML图片标签基础

HTML中的图片由<img>标签定义,核心属性包括：

src：图片路径（必填）
alt：替代文本（推荐填写）
width/height：宽高属性：鼠标悬停提示文本
loading：懒加载控制（如lazy）

提取图片的核心方法

方法类型	适用场景	核心代码示例
纯JavaScript	前端页面实时提取	`javascript<br><script><br>const images = document.querySelectorAll('img');<br>images.forEach(img => console.log(img.src));<br></script>`
jQuery	快速遍历操作	`javascript<br>$('img').each(function() {<br>console.log($(this).attr('src'));<br});`
Python+BeautifulSoup	后端批量处理	`python<br>from bs4 import BeautifulSoup<br>soup = BeautifulSoup(html_content, 'html.parser')<br>for img in soup.find_all('img'):<br>print(img.get('src'))`
正则表达式	简单文本匹配	`javascript<br>const regex = /<img[^>]+src="([^"]+)"/g;<br>let match;<br>while (match = regex.exec(htmlString)) {<br>console.log(match[1]);<br>}`

特殊场景处理方案

处理无alt属性的图片

const images = document.querySelectorAll('img:not([alt])');

提取带特定类名的图片

// 选择器示例：.product-image
document.querySelectorAll('img.product-image');

获取图片原始尺寸

const naturalWidth = imgElement.naturalWidth; // 原始宽度
const naturalHeight = imgElement.naturalHeight; // 原始高度

完整提取流程示例

<!DOCTYPE html>
<html>
<head>图片提取示例</title>
</head>
<body>
    <img src="image1.jpg" alt="示例图1">
    <img src="image2.png" data-index="2">
    <script>
        // 1. 获取所有图片元素
        const images = Array.from(document.images);
        // 2. 提取关键信息
        const result = images.map(img => ({
            src: img.src,
            alt: img.alt,
            width: img.width,
            height: img.height,
            title: img.title || '无标题'
        }));
        // 3. 输出结果
        console.table(result);
    </script>
</body>
</html>