使用 <source> 时仅显示默认图像答案

【问题标题】：only default images shows when using <source>使用 <source> 时仅显示默认图像
【发布时间】：2016-10-26 05:14:08
【问题描述】：

我正在尝试使用<picture> 和<source> 元素为我的网站提供一些响应式图片。

我的问题是只显示默认图像。我尝试使用不同的窗口大小重新加载页面，并且还加载了 PictureFill。

我做错了什么？

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source media="(max-width: 479px)" srcset="smallImage.jpg" />
        <source media="(max-width: 640px)" srcset="mediumImage.jpg" />
        <source media="(max-width: 767px)" srcset="largeImage.jpg" />
    <!--[if IE 9]></video><![endif]-->
    <img class="rsImg" src="xLargeImg.jpg" alt="MyDefaultImg" />
</picture>

注意：我在遇到此问题时一直在使用 Chrome

【问题讨论】：

您是否在控制台上遇到了一些错误？可能是图片被屏蔽了？

标签： html picturefill

【解决方案1】：

我会试试这个：

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source media="(min-width: 767px)" srcset="xLargeImg.jpg" /> <!-- the default image is also stated as a source -->
        <source media="(max-width: 767px)" srcset="largeImage.jpg" />
        <source media="(max-width: 640px)" srcset="mediumImage.jpg" />
        <source media="(max-width: 479px)" srcset="smallImage.jpg" />
    <!--[if IE 9]></video><![endif]-->
    <img class="rsImg" srcset="xLargeImg.jpg" alt="MyDefaultImg" />
</picture>

【讨论】：

我已经尝试过您的解决方案，但我得到了相同的结果。它使我认为我的测试方式具有误导性。我是：right click -> inspect -> hover over each tag in turn until the image gets a blue overlay，这就是我假设的图像。这个假设不正确吗