Question

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

我正在使用图片标记为不同的设备进行不同的图像重新解析。问题在于，如果用户不在任何情况下提供图像，则需要使用默认图像。

代码：

<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上看到了几个解决方案，但没有一个与图片标签相关。

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

提前致谢。

Answer 1

我找到了解决这个问题的方法，这个解决方案可以与移动设备上除IOS之外的所有浏览器完美配合。解决方案就像使用对象标签代替图片标签一样。

<强> CODE：

<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设备上遇到的问题是我的后备工作完全正常，但我的原始图像在首次加载后没有渲染。

有谁知道这有什么问题？

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

1 个答案: