如何在ionic中使用srcset？

Question

在 Ionic 4 PWA/应用程序（Angular）中使用 srcset 是否有一些最佳实践？

在网络浏览器中，这是一种很好的方式，可以为响应式图像提供多个来源，但 <ion-img> 似乎不支持它。

对于 angular 本身，我找到了 ng-srcset 指令，我可能可以简单地在普通 img 元素上使用它。

这是一个人在网站上会做的事情：

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

有人知道是否有特定的 "ionic way" 这样做吗？

非常感谢！
安德烈亚斯

Answer 1

ion-img 主要用于延迟加载图像（因为在引擎盖下它使用交集观察器）。但ion-img本身是一个相当简单的组件，见出处：

https://github.com/ionic-team/ionic/blob/master/core/src/components/img/img.tsx

因为你可以看到这个组件没有利用（还？）srcset，你可以在 Angular / Ionic 中自由地利用 <img> 本身（我不认为它有什么问题）。你可以做绑定等：

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

}

https://stackblitz.com/edit/ionic-4-template-bdpael

如何在ionic中使用srcset？

How to utilize srcset in ionic?

ionic-framework

angular

ionic4