如何使用带有回退机制的 <picture> 标签答案

【问题标题】：How to use <picture> tag with fallback Mechanism如何使用带有回退机制的 <picture> 标签
【发布时间】：2017-04-18 22:47:58
【问题描述】：

我正在构建一个基于内容管理系统的网站。在我的网站中，要求移动和桌面图像不同。

我正在使用图片标签为不同的设备提供不同的图像分辨率。问题是，如果用户在任何情况下都不提供图像，则需要使用默认图像代替它。

代码：

<picture>
    <source data-srcset="{{prod.desktopImage}}" media="(min-width: 768px)">
    <source data-srcset="{{prod.mobileImage}}" media="(min-width: 320px)">
    <img data-srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="${properties.placeholderimage}" alt="Not Available" class="lazyload">
</picture>

图片标签提供的默认图片只包括媒体的空白，不包括图片的不可用（据我的理解）。

我在stackOverflow上看过几个解决方案，但没有一个与图片标签相关。

任何人都可以帮我弄清楚吗？

提前致谢。

【问题讨论】：

标签： css html image image-processing

【解决方案1】：

我已经找到了解决这个问题的方法，这个解决方案几乎可以完美地适用于移动设备上除 IOS 之外的所有浏览器。解决方案类似于使用对象标签代替图片标签。

代码：

<picture>
    <source srcset="{{prod.desktopImage}}" media="(min-width: 768px)" >
    <source srcset="{{prod.mobileImage}}" media="(min-width: 320px)">
    <source src="${properties.placeholderimage}">
    <object data="{{prod.desktopImage}}" type="image/png">
        <img src="${properties.placeholderimage}" />
    </object>
</picture>

我在 IOS 设备上的问题是我的后备工作非常好，但我的原始图像在第一次加载后没有得到渲染。

有人知道这有什么问题吗？

【讨论】：