Адаптивное изображение с 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» является частью URL-адреса изображения и добавляет «% 2080w» в конец. Конечно, когда он идет, чтобы получить его, изображение не существует в этом месте.

Не думаю, что я неправильно использую источник? И я не могу найти кого-то еще с этой проблемой, и это только в IE. Пожалуйста помоги!

Заранее спасибо, ребята!

Answer 1

Вы не можете использовать "80w" в атрибуте src. IE не поддерживает атрибут srcset, поэтому он будет искать атрибут src для поиска URL-адреса изображения. Ваше значение src с "80w" неверно, поэтому IE не может найти правильный URL-адрес изображения.

В других браузерах, поддерживающих srcset, они непосредственно используют значение srcset в качестве URL-адреса изображения. Мы можем использовать положительное целое число, за которым сразу следует w в значении srcset, чтобы оно было правильным, и браузеры могли найти правильный URL-адрес изображения.

В заключение, вы правильно установили значение scrset, но установили значение src неверно. Это должно быть src="assets/img/pages/support-and-services/hub/head1-80w.png".