ionic3自定义图片自适应屏幕指令

移动端在显示穿插在大段内容中的图片时，要求图片能够自适应屏幕尺寸，等比例缩放。而通常内容中的图片，在后台编辑时会加入各种属性，例如宽高、边框、对齐方式等，这些属性会让图片在移动端的变形。
下面提供一个能够使图片自适应屏幕显示的属性指令。

一、创建指令

ionic g directive resetImg

在src>directives中生成新文件如下：

image.png

二、指令代码

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[reset-img]' // Attribute selector
})
export class ResetImgDirective {

  constructor(
    private el: ElementRef,
    private renderer2: Renderer2,
  ) {
  }

  ngAfterViewInit() {
    this.resetImg();
  }

  resetImg() {
    let imgs = this.el.nativeElement.querySelectorAll('img');
    imgs.forEach(element => {
      this.renderer2.removeAttribute(element, 'width');
      this.renderer2.removeAttribute(element, 'height');
      this.renderer2.removeAttribute(element, 'style');

      this.renderer2.setStyle(element, "max-width", "100%");
      this.renderer2.setStyle(element, "border", "0");
    });
  }
}

三、使用指令

1、需要在页面的module文件，如page.module.ts，中导入resetImg指令

...
import { DirectivesModule } from '../../../directives/directives.module';
@NgModule({
  ...,
  imports: [
    ...
    DirectivesModule
  ],
})
export class NewsViewPageModule {}

2、在模板文件中使用

<ion-col col-12  reset-img [innerHTML]="Rdata.content|trusted"></ion-col>

---

最终效果 img中的 style、width、height属性都已经被删除。

image.png