帶有 srcset 的響應圖像在 IE11 中不起作用

Question

<img srcset="assets/img/pages/support-and-services/hub/head1-40w.png 40w,
             assets/img/pages/support-and-services/hub/head1-80w.png 80w" 
     sizes="40px" 
     src="assets/img/pages/support-and-services/hub/head1-80w.png 80w" 
     class="d-none d-lg-inline" alt="head icon" />

上面是有問題的代碼。 我的圖像沒有顯示在 IE 中。 檢查網絡后，我發現它試圖在“assets/img/pages/support-and-services/hub/head1-80w.png%2080w”獲取圖像。

所以它以某種方式認為“80w”是圖像網址的一部分，並將“%2080w”附加到末尾。 當然，當它去獲取它時，該圖像不存在於該位置。

我認為我沒有錯誤地使用源集？ 而且我似乎找不到其他人有這個問題，而且它只在 IE 中。 請幫忙！

提前謝謝你們！

Answer 1

您不能在src屬性中使用“80w”。 IE 不支持srcset屬性，因此它會尋找src屬性來查找圖像 url。 您帶有“80w”的src值是錯誤的，因此 IE 找不到正確的圖像 url。

在其他支持srcset瀏覽器中，它們直接使用srcset值作為圖像 url。 我們可以在srcset值中直接使用一個正整數后跟w ，這樣瀏覽器就可以找到正確的圖像 url。

總之，您正確設置了scrset值，但錯誤地設置了src值。 它應該是src="assets/img/pages/support-and-services/hub/head1-80w.png" 。