'picture element responsive images not working with angular 4

The picture element as

 <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>

does not work in Angular 4 It selects the first source for all viewport widths, which in the above example is image1.png

Any solutions on this?

Solution 1:^[1]

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

(or)

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Joe Fitzsimmons

'picture element responsive images not working with angular 4

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]