AngularJS中img元素数据绑定及默认图片设置问题求助

完全可以通过控制器的数据绑定结合Angular的特性来解决这个问题！我帮你梳理两种核心场景的处理方案，刚好对应你遇到的「数据源为空（null/undefined）」和「图片加载失败」的情况：

1. 先搞定数据源为空的情况 #

你提到直接写URL能正常工作，但绑定后不行，很大概率是没用到ng-src而是用了原生的src。原生src会在Angular解析表达式前就把{{}}字符串当作请求地址，导致404错误。

解决方法很简单：

• 用ng-src替代src，让Angular先解析绑定的变量，再赋值给图片地址。
• 结合逻辑或运算符（||），当绑定的图片地址为null/undefined时，自动 fallback 到默认图。

示例代码：

控制器 #

app.controller('YourController', function($scope) {
  // 示例：可能为空的图片数据
  $scope.itemImage = null; // 或者 undefined、无效URL
});

模板 #

<img ng-src="{{itemImage || '/path/to/your/default-image.jpg'}}" alt="默认图">

这样当itemImage为空时，Angular会自动把图片地址替换成你指定的默认图路径，避免无效请求。

2. 处理图片加载失败的场景 #

有时候图片地址是有效的，但因为网络问题、资源被删除等原因加载失败，这时候需要监听图片的error事件，触发时替换成默认图。这里有两种实现方式：

方式A：直接在模板绑定ng-error事件 #

如果你的Angular版本支持ng-error（AngularJS 1.2+），可以直接在模板里写：

<img ng-src="{{itemImage || '/path/to/your/default-image.jpg'}}" 
     ng-error="this.src='/path/to/your/default-image.jpg'"
     alt="默认图">

当图片加载失败时，ng-error会触发，把当前图片的src替换成默认图地址。

方式B：自定义指令（更灵活，推荐） #

如果需要在多个地方复用这个逻辑，自定义指令是更好的选择，还能同时处理空值和加载失败的情况：

app.directive('defaultImage', function() {
  return {
    link: function(scope, element, attrs) {
      // 初始化时检查地址是否为空
      if (!attrs.ngSrc || attrs.ngSrc === 'null' || attrs.ngSrc === 'undefined') {
        element.attr('src', attrs.defaultImage);
      }
      
      // 监听加载失败事件
      element.on('error', function() {
        element.attr('src', attrs.defaultImage);
      });
    }
  };
});

然后在模板中使用：

<img ng-src="{{itemImage}}" 
     default-image="/path/to/your/default-image.jpg"
     alt="默认图">

为什么你之前的代码失效？ #

大概率是这两个原因：

• 用了src而非ng-src，导致Angular解析前就发起了无效请求；
• 只处理了数据源为空的情况，没监听error事件处理加载失败的场景；

按照上面的方法调整后，应该就能正常工作啦！

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