图片加载失败后的占位图：错误处理也要有终点

图片加载失败时，可以替换成占位图。但 onerror 是事件处理代码，不是备用图片地址，写成 onerror=“2.jpg” 并不会自动切换来源。

普通 img 的一次性回退

对没有 srcset、picture 或框架绑定接管的普通图片，可以在开始加载前注册一次监听：

function setImageWithFallback(image, sourceUrl, fallbackUrl) {
  image.addEventListener('error', function () {
    image.src = fallbackUrl;
  }, { once: true });
  image.src = sourceUrl;
}

const image = document.createElement('img');
image.alt = '内容图片';
image.width = 320;
image.height = 180;
setImageWithFallback(image, '/example-image.png', '/example-fallback.png');
document.getElementById('image-container').appendChild(image);

页面需要存在 image-container，两个路径也应由项目提供。监听器只响应一次；备用图也失败时，不会再由这个监听器不断替换 src。

该函数按“一次新加载”使用，重复调用同一元素时需先清理旧监听器或由组件统一管理。真实组件还要处理 srcset 等选源规则。HTMLImageElement

AngularJS 写法是另一层封装

维护旧 AngularJS 项目时，可以用指令关联 ng-src 和备用路径，下面只是其事件边界示意：

app.directive('errSrc', function () {
  return {
    link: function (scope, element, attrs) {
      function onError() {
        element.off('error', onError);
        if (attrs.errSrc) attrs.$set('src', attrs.errSrc);
      }
      element.on('error', onError);
      scope.$on('$destroy', function () {
        element.off('error', onError);
      });
    }
  };
});

它只处理该指令绑定期间的首次失败；如果 ng-src 会反复更新，应另行设计重新注册和状态重置。AngularJS 指令不能直接放到现代 Angular 或 Ionic 的另一套模板中使用。

本地备用图也会失败

文件丢失、部署基础路径、资源格式或网络问题，都可能使占位图加载失败。工程内资源并不是永不失败的保证。

同时保留有意义的替代文本和稳定尺寸，测试原图成功、原图失败与备用图也失败。回退可以改善展示，但不应掩盖持续的资源错误或代替对失败原因的检查。