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

Question

I have this:我有这个：

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

I want this:我要这个：

<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>

I want to do it with PHP's DOMDocument and have tried this code: (there may be more than one image in the html)我想用 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);
}

This produces:这产生：

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

How to place the picture tag correctly?如何正确放置图片标签？
How do I get both source tags ?我如何获得两个源标签？
How can I avoid the closing source tag ?如何避免关闭源标记？

I just cant wrap my head around this...我只是无法围绕这个...

PS: Dont bother about the image paths, those I will fix later. PS：不要担心图像路径，我稍后会修复。

Answer 1

you're appending it on source element instead of picture你将它附加在source元素而不是picture

replace this:替换这个：

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

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

with this:有了这个：

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

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

Answer 2

I got around to this code thanks to the hints from @swadhwa and @MaxiGui.多亏了@swadhwa 和@MaxiGui 的提示，我才开始使用这段代码。 Really appreciate your feedback, thanks.非常感谢您的反馈，谢谢。

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 标签周围

问题描述

2 个解决方案

解决方案1
0 2020-10-07 13:16:48

解决方案2
0 已采纳 2020-10-08 08:37:28

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

问题描述

2 个解决方案

解决方案1 0 2020-10-07 13:16:48

解决方案2 0 已采纳 2020-10-08 08:37:28

解决方案1
0 2020-10-07 13:16:48

解决方案2
0 已采纳 2020-10-08 08:37:28