我正在生成带有图像变体集的picture
html标签,但是当我在chrome中打开它时,浏览器仍然会得到默认的png图像
我尝试了不同的srcset和大小集,但没有运气
<picture>
<source type="image/jpeg" sizes="(max-width: 320px) 290px, (max-width: 1200px) 290px, (max-width: 576px) 290px, (max-width: 992px) 290px, (max-width: 768px) 290px" srcset="http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w">
<source type="image/webp" sizes="(max-width: 320px) 290px, (max-width: 1200px) 290px, (max-width: 576px) 290px, (max-width: 992px) 290px, (max-width: 768px) 290px" srcset="http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w">
<img src="http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w" srcset="http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w" media="(max-width: 320px) 290px, (max-width: 1200px) 290px, (max-width: 576px) 290px, (max-width: 992px) 290px, (max-width: 768px) 290px" class="img-fluid" alt="">
</picture>
答案 0 :(得分:0)
浏览器采用它支持的第一个 <source>
元素。因为所有浏览器都支持 image/jpeg
,所以第二个 <source type="image/webp">
总是被忽略。
要解决此问题,您必须颠倒 <source>
元素的顺序:
<picture>
<source type="image/webp" …>
<source type="image/jpeg" …>
<img …>
</picture>