Ответ 1

Ответ на этот вопрос содержится в коде Angular. Это не ошибка, это просто поведение, которое они решили. Начиная с строки 13895, вы можете увидеть этот директивный код:

forEach(['src', 'srcset', 'href'], function(attrName) {
   var normalized = directiveNormalize('ng-' + attrName);
   ngAttributeAliasDirectives[normalized] = function() {
   return {
      priority: 99, // it needs to run after the attributes are interpolated
      link: function(scope, element, attr) {
          attr.$observe(normalized, function(value) {

         if (!value)
             return;

         attr.$set(attrName, value);

         if (msie) element.prop(attrName, attr[attrName]);
       });
     }
    };
  };
});

Ключ находится в:

if (!value) return;

Итак, как вы можете видеть, если вы измените выражение ng-src на пустую строку, это никогда не изменит фактическое значение src. Вы можете обойти это, сделав то, что предложил MadScone.

Ответ 2

Предложение MadScone - это крутая идея, но она не работает для меня во всех браузерах. Я закончил тем, что просто показывал элемент только тогда, когда src не пуст:

<img ng-show="theImage!==''" ng-src="{{theImage}}">

Это кажется самым безопасным вариантом для меня после прочтения потока, на который ссылается MadScone (здесь). Как отметил ряд людей, принятый ответ не работает во всех браузерах и имеет некоторые другие проблемы, которые могут возникнуть. Простое скрытие элемента позволяет избежать этого.

Update: Как указывалось в комментариях, !=='' в ng-шоу совершенно ненужно. Здесь более чистая версия:

<img ng-show="theImage" ng-src="{{theImage}}">

Ответ 3

Обновление (апрель 2015 г.)

См. ответ разработки, очевидно, этот метод, который я предложил первоначально, может не работать во всех браузерах.

Оригинал (февраль 2014 года)

Я не совсем уверен, почему это происходит, но здесь способ решения этого вопроса в любом случае. Добавьте эту функцию к контроллеру:

$scope.getImage = function(src) {
  if (src !== "") {
    return src;  
  } else {
   return "//:0"; 
  }
};

"Пустое" изображение получит источник //:0, который не вызовет появление пропавшего изображения изображения (см. верхний ответ на этот поток).,

Затем вы можете установить источник, используя:

<img ng-src="{{getImage(superImage)}}" />

EDIT:

На самом деле, было бы проще изменить кнопку, нажав на эту кнопку:

<button ng-click="superImage = '//:0'">Remove superImage</button>

Тогда нет необходимости в функции. Хотя я считаю, что метод функции лучше.

Ответ 4

Еще один короткий способ его решения: <img ng-src="{{image?image:' '}}" />

Ответ 5

исправить его значением set = ""; с пробелами.

Я также добавляю следующий css, чтобы убедиться, что он не отображается.

img[src="_"]
    display none !important

настоящая причина обсуждалась здесь: https://github.com/angular/angular.js/issues/1218

Ответ 6

<img data-ng-src="{{image || 'http://www.1x1px.me/FFFFFF-0.png'}}" data-ng-model="image">

Вы можете выбрать любое изображение 1x1px, подходящее для вашего сайта, и заменить http://www.1x1px.me/FFFFFF-0.png. Для моего сайта я использую доступное изображение на http://www.1x1px.me.

P/S: не нужно беспокоиться об исходном атрибуте src тега img, потому что он не влияет на модель изображения

Ответ 7

ng-hide и ng-show могут помочь вам решить эту проблему

<img ng-src="{{Image}}" ng-hide="Image == null" ng-show="Image != null" ng-click="ChooseImage()" width="100%"  />

$scope.Image = null;

или

<img ng-src="{{Image}}" ng-hide="Image === ''" ng-show="Image !== ''" ng-click="ChooseImage()" width="100%"  />

$scope.Image = '';

Ответ 8

Возможное обходное решение

принудительно angular для удаления ng-src

Кроме того, если у вас есть источник изображения по умолчанию, вы можете просто установить ng-src в значение по умолчанию src, когда ng-src должно быть пустым.

Ответ 9

 <img src="{{superImage}}" />   

Это работает как ожидалось Edit:

Другие работы arround, возможно, вы могли использовать и пустую строку.

ng-click="superImage = ' '  

чтобы сделать его пустым. Он не вызывает 404