html - 如何在 Angular 2 中轻轻更改 img src

Question

当我动态更改 img 的 src 属性时，加载新图像时显示旧图像。

我有一个显示一些数据的组件:文本和图像。单击基础数据会更改(即来自服务器的新数据)。单击后，文本会立即更改，但组件会在加载新图像时显示旧图像。当加载新图像时，它会以视觉方式显示，这可能会花费大量时间。

在实际应用中，可以通过单击按钮获得产品详细信息和更改产品。所有数据都会立即被替换，但不会替换图像。

当组件未被销毁(重用)时存在问题。

我已经尝试过点击后清晰图像 src，但它没有用。

我在模板中有简单的绑定(bind)

img [src]="img.url" style="width: 300px; height: 300px">
<p>{{ img.text }}</p>

点击图片会发生变化

this.img = this.images[1];

您可以在此处查看示例应用 https://stackblitz.com/edit/angular-cojqnf

是否可以更好地控制此图像更改过程？例如，点击清除图像并等待背景为空的新图像会很棒。

Answer 1

我对你的 stackblitz 演示进行了一些改动，我基本上将你的代码包装在 ImageGhostDirective 中以使其可重用。该指令使用 MutationObserver 监听 src 属性的任何更改以更改样式。在“加载”事件上使用 HostListener，它将样式恢复为正常。我从第一次加载的不透明度 0 开始，然后在连续的图像更改之间将不透明度设置为 0.2，但这完全是任意的，可以用微调器或任何类型的占位符代替...

这里是 stackblitz 的链接:https://stackblitz.com/edit/angular-image-ghost-directive

<img [src]="'https://loremflickr.com/300/300?random=' + index"
     style="width: 300px; height: 300px" imgGhost>

@Directive({
  selector: 'img[imgGhost]'
})
export class ImageGhostDirective implements OnDestroy {
  private changes: MutationObserver;

  constructor(private elementRef: ElementRef) {
    this.changes = new MutationObserver((mutations: MutationRecord[]) =>
      mutations.filter(m => m.attributeName === 'src').forEach(() => this.opacity = 0.2)
    );

    this.changes.observe(this.elementRef.nativeElement, {
      attributes: true,
      childList: false,
      characterData: false
    });
  }

  ngOnDestroy(): void {
    this.changes.disconnect();
  }

  @HostBinding('style.display') display = 'block';
  @HostBinding('style.opacity') opacity = 0;

  @HostListener('load')
  onLoad(): void {
    this.opacity = 1;
  }
}

通过在指令装饰器中使用 img:not([imgGhost]) 选择器，也可以告诉 Angular 自动将此指令附加到每个 img 元素。这样，您就不必手动将指令放置在应用中的每张图片上。

希望这是有用的。