为什么不下载 <picture> 源进行离线下载

Question

我正在下载一个网站供离线查看，网站上的图片写在<picture></picture>元素内。

当我使用浏览器或使用网站下载软件下载页面时，图像未下载。

比如这张图片

<picture>
    <source srcset="thumb1.jpg" media="(min-width: 1200px)">
    <source srcset="thumb2.jpg" media="(min-width: 992px)">
    <source srcset="thumb3.jpg" media="(min-width: 600px)">
    <source srcset="thumb4.jpg" media="(min-width: 320px)">

    <img src="main-image.jpg">
</picture>

浏览器下载了main-image.jpg img，但它不下载source图像thumb1.jpg、thumb2.jpg等。这导致下载后所有图像都没有显示页面。

这是为什么呢？为什么浏览器不下载source图片？

该网站建立在名为 Concrete5 的 php CMS 上，因此生成了 html 代码，我无法更改生成的 html。网址是http://www.exrx.net/concrete

这个问题有解决办法吗？是否有免费/付费软件来完成这项任务？

我尝试了一个名为 HTTrack 和 Getleft 的软件。它们的行为方式与浏览器相同。

Answer 1

这个问题有解决方案吗？是否有免费/付费软件来完成这项任务？

我不知道有什么工具可以下载源标签上的文件。

编辑 02

使用以下 sn-p 您将抓取所有图像：

$html = file_get_contents('http://www.exrx.net/concrete/');
$doc = new DOMDocument();
libxml_use_internal_errors(true);
$doc->loadHTML($html);
libxml_clear_errors();

$imgs = [];
$pictures = $doc->getElementsByTagName('picture');
foreach ($pictures as $picture) {
    $img = [];
    $img[] = $picture->getElementsByTagName('img')->item(0)->getAttribute('src');
    $sources = $picture->getElementsByTagName('source');
    foreach ($sources as $source) {
        $img[] = $source->getAttribute('srcset');
    }
    $imgs[] = $img;
}

这将产生：

(
    [0] => Array
        (
            [0] => path/to/file/i1-the original-img-tag-image.gif
            [1] => path/to/file/i2.png
            [2] => path/to/file/i3.png
            [3] => path/to/file/i4.png
            [4] => path/to/file/i5.png
        )
    ...
)

然后可以替换这些图像。

来源：
- libxml_use_internal_errors() on SO
- DOM on php.net