Question

以下是我在页面上的<picture>元素：

<picture>
     <source media="(max-width: 6400px)" srcset="./images/large.jpg 1024w"  sizes="100vw" />
</picture>

但是当我在Chrome浏览器中打开我的页面时，我看不到任何图片。甚至在devtools网络面板中也没有请求图像。

我检查了caniuse.com，Chrome 42是支持<picture>元素。

那么为什么<picture>不起作用？

Answer 1

根据caniuse，<picture>支持取决于在chrome：// flags中启用experimental Web Platform features

Answer 2

您错过<img>内的<picture>。将您的HTML更改为：

<picture>
   <source media="(max-width: 6400px)" 
           srcset="./images/large.jpg 1024w" sizes="100vw" />
   <img src="default.jpg" alt="my images" />
</picture>

HTML <picture>元素在Chrome 42 </picture>中不起作用

2 个答案: