使用PHP DOMDocument构造<picture>标签时saveHTML输出为空的问题

1. 直接调用saveHTML()导致输出不符合预期 #

DOMDocument->saveHTML()默认会输出包含DOCTYPE、html、body的完整文档结构，而你的代码只构建了<picture>元素，直接输出的话可能看不到目标内容。正确做法是指定要输出的节点：

$str = $new_dom->saveHTML($picture);

2. <source>标签缺少关键的type属性 #

WebP和JPEG格式的<source>必须声明type属性，浏览器才能正确识别资源类型，这是功能上的必要补充：

• WebP资源添加 type="image/webp"
• JPEG资源添加 type="image/jpeg"

3. 确保变量有有效值 #

要确认$srcset_webp、$sizes、$srcset这些变量已经被正确赋值，空值可能导致DOM处理异常。

修正后的完整代码 #

$new_dom = new DOMDocument();
$new_dom->encoding = 'UTF-8'; // 避免中文乱码

$picture = $new_dom->createElement('picture');
$new_dom->appendChild($picture);

// 创建WebP source
$source_webp = $new_dom->createElement('source');
$source_webp->setAttribute('srcset', $srcset_webp);
$source_webp->setAttribute('sizes', $sizes);
$source_webp->setAttribute('type', 'image/webp');
$picture->appendChild($source_webp);

// 创建JPEG source
$source_jpg = $new_dom->createElement('source');
$source_jpg->setAttribute('srcset', $srcset);
$source_jpg->setAttribute('sizes', $sizes);
$source_jpg->setAttribute('type', 'image/jpeg');
$picture->appendChild($source_jpg);

// 仅输出picture节点内容
$str = $new_dom->saveHTML($picture);

WordPress场景额外优化 #

标准的<picture>标签需要保留原<img>作为降级方案，确保不支持picture的浏览器能正常显示图片。可以复制原img的属性（比如alt、class、loading等）添加到picture中：

// 假设$original_img是你从原内容中获取的DOMElement对象
$img = $new_dom->createElement('img');
$img->setAttribute('src', $original_img->getAttribute('src'));
$img->setAttribute('alt', $original_img->getAttribute('alt'));
// 复制所有原img属性
foreach ($original_img->attributes as $attr) {
    $img->setAttribute($attr->name, $attr->value);
}
$picture->appendChild($img);

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