[英]Chrome dont recognize webp source in picture tag
I'm generating picture
html tag with set of variants of image but when I opening it in chrome, browser still getting default png image我正在生成带有一组图像变体的
picture
html 标签,但是当我在 chrome 中打开它时,浏览器仍然获得默认的 png 图像
I tried different sets of srcset and sizes but no luck我尝试了不同的 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>
The browser takes the first <source>
element it supports.浏览器采用它支持的第一个
<source>
元素。 Because all browsers support image/jpeg
the second <source type="image/webp">
gets always ignored.因为所有浏览器都支持
image/jpeg
所以第二个<source type="image/webp">
总是被忽略。
To fix this issues you have to reverse the order of the <source>
elements:要解决此问题,您必须颠倒
<source>
元素的顺序:
<picture>
<source type="image/webp" …>
<source type="image/jpeg" …>
<img …>
</picture>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.