PHP爬取class为block__item的div区块时图片无法显示问题

数据老陈

2026-8-30

问题核心原因

图片加载失败首先是路径问题：原站图片多为相对路径，直接输出到你自己的页面时，浏览器会默认从你当前的站点域名下找图片资源，自然找不到。
其次是懒加载机制影响：该站点对非首屏图片做了懒加载处理，真实图片地址存在data-src、data-original这类自定义属性上，src属性里一般是很小的占位图甚至空值，直接输出原DOM的话浏览器读不到真实图片地址。
之前用array_combine报错是因为DOMNodeList是对象不是普通PHP数组，不能直接作为数组合并函数的入参，而且全局查询的图片节点和目标区块节点数量、顺序也不一定完全对应，强行合并必然出错。

修复方案

不要全局查询图片再做匹配，遍历每个block__item区块节点时，在当前节点内部单独查询它包含的img标签，再逐个处理图片地址即可。
完整修正代码如下：

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
 
$url = "https://www.repubblica.it";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
// 模拟浏览器UA，避免被反爬拦截
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36");
$content = curl_exec($ch);
curl_close($ch);

$doc = new DOMDocument('1.0', 'utf-8');
// 屏蔽不规范HTML导致的解析警告
libxml_use_internal_errors(true);
$doc->loadHTML($content);
libxml_clear_errors();

$classname="block__item";
$finder = new DomXPath($doc);
$spaner = $finder->query("//*[contains(@class, '$classname')]");

foreach ($spaner as $item) {
    // 重点：.//img 代表从当前区块节点向下查找内部图片，不会匹配区块外内容
    $imgNodes = $finder->query(".//img", $item);
    foreach ($imgNodes as $img) {
        // 优先读取懒加载属性里的真实图片地址
        $realSrc = '';
        if ($img->hasAttribute('data-src')) {
            $realSrc = $img->getAttribute('data-src');
        } elseif ($img->hasAttribute('data-original')) {
            $realSrc = $img->getAttribute('data-original');
        } else {
            $realSrc = $img->getAttribute('src');
        }
        // 相对路径转绝对路径，补全域名
        if (!preg_match('/^https?:\/\//i', $realSrc)) {
            $realSrc = rtrim($url, '/') . '/' . ltrim($realSrc, '/');
        }
        // 将真实地址写入src属性
        $img->setAttribute('src', $realSrc);
    }
    // 输出处理完成的区块内容
    echo $doc->saveXML($item);
}
?>

关键注意点

查询区块内图片时XPath必须写.//img，开头的.代表从当前节点开始向下查找，如果漏了.写成//img，还是会查询整个文档的所有图片，无法和当前区块绑定。
处理图片地址时要判断是不是带协议的绝对路径，如果是相对路径必须拼接原站域名转成完整地址，否则跨站加载时会找不到资源。
请求时加上浏览器UA标识，避免被原站的反爬规则拦截，返回空内容或者403页面。
解析HTML时用libxml_use_internal_errors屏蔽不规范HTML导致的解析警告，比直接用@错误抑制符更稳妥。

内容的提问来源于stack exchange，提问作者ro_ Dif