javascriptangularpicturefillpicture-element

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

  • Angular has nothing to do with this. The browser interprets the <picture> code alone.

    Anyway, the main issue with your code is that it lacks the mandatory <img> element.

    Also, the third <source> is useless, the viewport will be either max-width: 768px or min-width: 769px, it can't be another value.