Angular图片加载失败占位符指令：如何抑制控制台GET 404错误日志？

嘿，这个问题我之前在做Angular项目的时候也碰到过！你的指令功能没问题，但浏览器会默认记录图片加载失败的404日志——哪怕你监听了error事件并替换了src，这个日志还是会生成，因为DOM里的img已经尝试加载那个错误的URL了。不过有个靠谱的办法能解决这个问题：

核心思路是先通过JS的Image对象预加载原图，只有当预加载成功时，才把原图的URL设置到DOM中的img元素上；如果预加载失败，直接给DOM元素设置占位符URL。这样DOM里的img永远不会尝试加载错误的URL，自然就不会产生404日志了。

修改后的指令代码 #

@Directive({ selector: 'img[imgFallback]' })
export class ImageFallbackDirective implements OnDestroy {
  private _isApplied = false;
  private _targetImageElement: HTMLImageElement;
  private _preloadImage?: HTMLImageElement;
  srcFallback: string = "https://via.placeholder.com/120";
  @Output() wasLoaded = new EventEmitter<boolean>();

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this._targetImageElement = el.nativeElement;
    this.preloadOriginalImage();
  }

  ngOnDestroy() {
    // 清理预加载图片的事件监听，避免内存泄漏
    if (this._preloadImage) {
      this._preloadImage.onerror = null;
      this._preloadImage.onload = null;
    }
  }

  // 处理动态变化的src
  @Input() set src(val: string) {
    if (this._preloadImage) {
      // 清理之前的预加载资源
      this._preloadImage.onerror = null;
      this._preloadImage.onload = null;
    }
    this._isApplied = false;
    this.preloadOriginalImage();
  }

  private preloadOriginalImage() {
    const originalSrc = this._targetImageElement.getAttribute('src');
    if (!originalSrc) {
      // 如果原本没有设置src，直接显示占位符
      this.setSrcToFallback();
      return;
    }

    this._preloadImage = new Image();
    this._preloadImage.src = originalSrc;

    // 预加载成功：把原图设置到DOM元素
    this._preloadImage.onload = () => {
      this.renderer.setAttribute(this._targetImageElement, 'src', originalSrc);
      this.wasLoaded.emit(false);
      // 清理事件监听
      this._preloadImage!.onload = null;
    };

    // 预加载失败：设置占位符
    this._preloadImage.onerror = () => {
      this.setSrcToFallback();
      this.wasLoaded.emit(true);
      // 清理事件监听
      this._preloadImage!.onerror = null;
    };
  }

  private setSrcToFallback() {
    this._isApplied = true;
    this.renderer.setAttribute(
      this._targetImageElement,
      'src',
      this.srcFallback
    );
  }
}

关键改动说明 #

1. 移除了DOM元素的error/load监听：不再让DOM里的img直接加载可能错误的URL，而是用独立的Image对象做预加载
2. 新增预加载逻辑：通过new Image()创建的图片实例加载原图，成功/失败后再操作DOM元素的src
3. 支持动态src：添加了@Input() set src(val: string)，当图片的src通过[src]动态绑定变化时，会自动重新触发预加载
4. 内存泄漏防护：在组件销毁和src变化时，清理预加载图片的事件监听

为什么原方法会产生404日志？ #

原指令是直接给DOM中的img设置了错误的src，浏览器会发起请求，请求失败后触发error事件，这时候才替换成占位符——但请求已经发出去了，浏览器必然会在控制台记录这个404错误，这个是浏览器的默认行为，没法通过event.preventDefault()阻止（图片的error事件不支持阻止默认行为）。

内容的提问来源于stack exchange，提问作者YSFKBDY