CODEWITHSUNDEEP
javascriptangularpicturefillpicture-element
succeed
succeed

Reputation: 1020

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?

Upvotes: 0

Views: 662

Answers (2)

Senthil Kumar
Senthil Kumar

Reputation: 183

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

Upvotes: 0

Nicolas Hoizey
Nicolas Hoizey

Reputation: 2031

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.

Upvotes: 0

Related Questions