Адаптивные изображения элементов изображения не работают с угловым 4

Question

Элемент изображения как

 <picture>
     <source  media="(max-width: 768px)" srcset="../assets/image1.png">
     <source  media="(min-width: 769px)" srcset="../assets/image2.png">
     <source  src="../assets/image3.png">
 </picture>

не работает в Angular 4 Он выбирает первый источник для всех ширин видового экрана, который в приведенном выше примере является image1.png

Какие-либо решения по этому поводу?

Answer 1

Angular не имеет к этому никакого отношения. Браузер интерпретирует <picture> код один.

В любом случае, основная проблема с вашим кодом заключается в том, что в нем отсутствует обязательный <img> элемент.

Также третий <source> бесполезен, видовой экран будет либо max-width: 768px или же min-width: 769px, это не может быть другим значением.

Answer 2

      <picture>
  <source media="(max-width: 1048px)" [srcset]="bannerMobOne" />
  <img [src]="bannerOne" alt="" />
</picture>

(или же)

      <picture>
  <source media="(max-width: 1048px)" srcset="assets/images/landing/Banner01.jpg" />
  <img src="assets/images/landing/Banner01.jpg" alt="" />
</picture>