如何使用 <picture> 標簽與后備機制

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以外的所有瀏覽器。 解決方案就像使用對象標簽代替圖片標簽一樣。

碼：

<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設備上遇到的問題是我的后備工作完全正常，但我的原始圖像在首次加載后沒有得到渲染。

有誰知道這有什么問題？