add new API fxSrc for responsive features Image element

[ThomasBurleson]

Similar to responsive features in the picture element

<picture>
  <source  media="(min-width: 650px)"    srcset="images/kitten-stretching.png">
  <source  media="(min-width: 465px)"    srcset="images/kitten-sitting.png">
  <img  src="images/kitten-curled.png"  alt="a cute kitten">
</picture>

or 

<picture>
  <source media="(min-width: 800px)"
          sizes="80vw"
          srcset="lighthouse-landscape-640.jpg 640w,
                  lighthouse-landscape-1280.jpg 1280w,
                  lighthouse-landscape-2560.jpg 2560w">
  <img src="lighthouse-160.jpg" alt="lighthouse"
       sizes="80vw"
       srcset="lighthouse-160.jpg 160w,
               lighthouse-320.jpg 320w,
               lighthouse-640.jpg 640w,
               lighthouse-1280.jpg 1280w">
</picture>

``

Enable adaptive layouts with:

```html
<img 
     fxSrc="images/kitten-curled.png" 
     fxSrc.xs="images/kitten-sitting.png"
     fxSrc.sm="images/kitten-stretching.png"
/>

<!-- Or use SrcSet to wrap image in `<picture>` with `<source>` entries -->
<img 
     [fxSrcSet]="srcSet1" 
     [fxSrcSet.gt-sm]="srcSet2"
/>

see https://www.html5rocks.com/en/tutorials/responsive/picture-element/

[benbraou]

I had a similar need in a personal project using @angular/flex-layout.
So, I created a library angular-flex-picture (https://github.com/benbraou/angular-flex-picture)

<picture>
  <source [flexMedia]="'xs'" srcset="https://dummyimage.com/300x200/d607d6/fff.png&text=xs">
  <source [flexMedia]="'md'" srcset="https://dummyimage.com/500x300/0820d4/fff.png&text=md">
  <img src="https://dummyimage.com/600x400/ffffff/000000.png&text=default" style="width:auto;">
</picture>

But, I just found out about this issue.
@ThomasBurleson : are you open to a PR that implements the specifications you mentioned above ? I should have time in the next month during my weekends.

Thanks

[ThomasBurleson]

@benbraou - YES! plz submit a PR and let's get this feature into the core of @angular/flex-layout.

Instead of using flexMedia, I suggest a better approach would be the following directive:

<picture>
  <img  style="width:auto;"
        src="https://dummyimage.com/600x400/ffffff/000000.png" 
        srcset.xs="https://dummyimage.com/300x200/d607d6/fff.png"
        srcset.md="https://dummyimage.com/500x300/0820d4/fff.png" >
</picture>

Where srcset.xs is a flex-layout directive that injects <source> element:

<source media="(min-width: 600px)"
              srcset="https://dummyimage.com/300x200/d607d6/fff.png" >

[benbraou]

Thanks for the quick reply!
Indeed, I agree with your approach.
I'll take this issue then ^^

[benbraou]

I am working on this issue this weekend.

[mackelito]

I'm so looking forward to seeing this. 😁

[mackelito]

@ThomasBurleson
Btw.. will this have x2/X3... support?
for use like:
<img src='illustration-small.png' srcset='images/illustration-small.png 1x, images/illustration-big.png 2x' style='max-width: 500px'/>

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}