如何将图片标签包裹在 img 标签周围

Question

我有这个：

<img src="large/image.png" />

我想要这个：

<picture>
  <source media="(min-width:800px)" srcset="medium/image.png">
  <source media="(min-width:300px)" srcset="small/image.png">
  <img src="large/image.png" />
</picture>

我想用 PHP 的 DOMDocument 来做，并试过这段代码：（html中可能不止一张图片）

$domContent = $domDocument->loadHTML($html);
$images = $domDocument->getElementsByTagName('img');
foreach ($images as $image) {
  $picture = $domDocument->createElement('picture');
  // $pic_clone = $picture->cloneNode();

  $source = $domDocument->createElement('source');
  $source->setAttribute("media", "(min-width:800px)");
  $source->setAttribute("srcset", "path_large");
  $source->setAttribute("media", "(min-width:300px)");
  $source->setAttribute("srcset", "path_small");

  $src_clone = $source->cloneNode();
  $src_clone->appendChild($picture);

  $image->parentNode->replaceChild($src_clone, $image);
  $src_clone->appendChild($image);
}

这会产生：

<source media="(min-width:300px)" srcset="path_small">
<picture></picture>
<img src="large/image.png"></source>

如何正确放置图片标签？
如何获得两个来源标签？
如何避免关闭源标记？

我就是想不通这个……

PS：图片路径不用管，我稍后会修复。

Answer 1

您将其附加到 source 元素而不是 picture

替换为：

$src_clone = $source->cloneNode();
$src_clone->appendChild($picture);

$image->parentNode->replaceChild($src_clone, $image);
$src_clone->appendChild($image);

有了这个：

$src_clone = $source->cloneNode();
$picture->appendChild($src_clone);

$image->parentNode->replaceChild($src_clone, $image);
$picture->appendChild($image);

Answer 2

感谢@swadhwa 和@MaxiGui 的提示，我开始使用这段代码。非常感谢您的反馈，谢谢。

private function PictureWrapper($content=false) {

    $domDocument = new DOMDocument();
    $domContent = $domDocument->loadHTML("<html><head><meta content='text/html; charset=utf-8' http-equiv='Content-Type'></head><body>" . $content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

    if (false === $domContent) {
        return $content;
    }
  
    $images = $domDocument->getElementsByTagName('img');
    if (0 === count($images)) {
        return $content;
    }

    foreach ($images as $image) {
        $img_src = $image->getAttribute("src");
        $arr = pathinfo($img_src);
        $dirname = $arr['dirname'];
        $base = $arr['basename'];

        $img_medium = $dirname . "/medium/" . $base;
        $img_small = $dirname . "/small/" . $base;

        $picture = $domDocument->createElement('picture');
        $pict_clone = $picture->cloneNode();
        $image->parentNode->replaceChild($pict_clone, $image);
        $pict_clone->appendChild($image);
            
        $source = $domDocument->createElement('source');
        $source->setAttribute("media", "(min-width:800px)");
        $source->setAttribute("srcset", $img_medium);
        $src_clone = $source->cloneNode();
        $image->parentNode->replaceChild($src_clone, $image);
        $src_clone->appendChild($image);
            
        $source = $domDocument->createElement('source');
        $source->setAttribute("media", "(min-width:300px)");
        $source->setAttribute("srcset", $img_small);
        $src_clone = $source->cloneNode();
        $image->parentNode->replaceChild($src_clone, $image);
        $src_clone->appendChild($image);
    }
    $content = $domDocument->saveHTML();
    $content = str_replace('<html><head><meta content="text/html; charset=utf-8" 
    http-equiv="Content-Type"></head><body>', "", $content);
    $content = str_replace('</body></html>', "", $content);
    $content = str_replace('</source>', "", $content);

    return $content;
}

如何将图片标签包裹在 img 标签周围

How to wrap picture tag around an img tag

html

php

domdocument