如何使用HTML picture元素？图片无法显示问题求助

你的代码存在几个关键问题，导致图片无法正常显示，逐一解决如下：

1. 必须添加fallback的<img>元素 #

<picture>标签本身不会渲染任何内容，必须搭配一个<img>作为降级选项——不管是浏览器不支持<picture>，还是所有<source>的media条件都不匹配时，这个<img>都会生效。没有它的话，浏览器没有可渲染的图片节点。

2. media查询顺序错误 #

浏览器会匹配第一个符合当前视口条件的<source>，你现在的min-width顺序是从小到大，会导致大视口下优先匹配小尺寸的条件（比如视口1200px时，第一个min-width:600px就满足了，只会加载gallery-01.png，而非预期的gallery-03.jpg）。正确的做法是把min-width值从大到小排列。

3. 验证图片路径与文件有效性 #

确认images/目录下确实存在对应文件名的图片，注意文件名大小写（Linux服务器区分大小写，PNG和png是不同文件）。可以直接在浏览器地址栏输入图片的完整URL（比如http://你的站点域名/images/gallery-01.png），测试是否能正常打开，排除文件丢失或路径错误的问题。

修复后的完整代码 #

<div class="container">
    <div class="pic">
        <picture>
            <!-- 按min-width从大到小排列 -->
            <source media="(min-width: 1100px)" srcset="images/gallery-03.jpg">
            <source media="(min-width: 900px)" srcset="images/gallery-02.png">
            <source media="(min-width: 600px)" srcset="images/gallery-01.png">
            <!-- 降级用的img，必填项 -->
            <img src="images/gallery-default.jpg" alt="画廊展示图">
        </picture>
    </div>
</div>

额外优化建议 #

可以给图片容器设置基础样式，避免图片加载后布局跳动：

.pic {
    width: 100%;
    min-height: 300px; /* 预留占位高度 */
}
img, source {
    display: block;
    width: 100%;
    height: auto; /* 保持图片比例 */
}

内容的提问来源于stack exchange，提问作者Remo