is there some best practice for using srcset in Ionic 4 PWAs / Apps ( with Angular )?
In webbrowsers it is a nice way, to provide multiple sources for responsive images, but the <ion-img> seems not to support it.
For angular itself I found the ng-srcset directive, which I could probably simply use on normal img elements.
This is what one would do in a website:
<img src="https://host.de/path/img.jpg" srcset="
https://host.de/path/img_760.jpg 760w,
https://host.de/path/img_380.jpg 380w,
https://host.de/path/img_752.jpg 752w,
https://host.de/path/img_295.jpg 295w"
sizes="(min-width: 1200px) 380px, (min-width: 992px) 376px, 39.2vw"
class="img-responsive">
Anybody knows if there is a specific "ionic way" of doing this?
Thx a lot!
Andreas
ion-img is mostly useful for lazy loading images (as under the hood it uses intersection observer). But in itself ion-img is a rather simple component, see the source:
https://github.com/ionic-team/ionic/blob/master/core/src/components/img/img.tsx
Since as you can see there this component does not leverage (yet?) srcset, you are free to leverage <img> itself in an Angular / Ionic as is (and I do not think there is anything wrong with it). You can do bindings etc:
<ion-header>
<ion-toolbar color="primary">
<ion-title>
Ionic 4 template
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<img src="https://picsum.photos/300/300" srcset='https://picsum.photos/300/300 300w,
https://picsum.photos/400/400 400w,
https://picsum.photos/600/600 600w,
https://picsum.photos/600/600 400w'
sizes="(min-width: 800px) 600px, (min-width: 600px) 400px, 39.2vw"
class="img-responsive"/>
<img src="https://picsum.photos/300/300" [srcset]='srcSetConfig'
sizes="(min-width: 800px) 600px, (min-width: 600px) 400px, 39.2vw"
class="img-responsive"/>
</ion-content>
ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.css'],
})
export class HomePage {
srcSetConfig = `https://picsum.photos/300/300 300w,
https://picsum.photos/400/400 400w,
https://picsum.photos/600/600 600w,
https://picsum.photos/600/600 400w`
}