빈 ng-src는 이미지를 갱신하지 않습니다.

빈 ng-src는 이미지를 갱신하지 않습니다.

Angular가 식을 평가하기 전에 브라우저가 이미지를 요구하는 것을 피하기 위해 ng-src 디렉티브를 사용하고 있습니다.

ng-src={{image}}는, 「image」의 표현이 변경되면, 이미지의 src 속성을 갱신합니다.표현식("myImage.png")이 비어 있으면 ng-src 디렉티브가 이미지의 경로를 업데이트하지 않는 이유를 오해하고 있습니다.

식이 공백이 되면 ng-src Atribut은 공백이 되지만 src Atribut은 마지막으로 알려진 src 그대로입니다.따라서 이미지가 업데이트되지 않습니다.이미지가 "삭제"되도록 src 속성이 (빈 src로) 업데이트되지 않는 이유

여기 플런커가 있습니다.

감사해요.

이에 대한 답은 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이 제안한 것을 통해 이 문제를 해결할 수 있습니다.

MadScone의 제안은 멋진 아이디어지만, 모든 브라우저에서 통하지는 않았다.결국 src가 비어 있지 않은 경우에만 요소를 표시하게 되었습니다.

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

MadScone이 참조한 스레드를 읽어본 결과, 이 옵션이 가장 안전한 옵션인 것 같습니다.많은 사람들이 지적했듯이, 받아들여진 답변이 모든 브라우저에서 작동하는 것은 아니며 발생할 수 있는 몇 가지 다른 문제가 있다.요소를 숨기는 것만으로 모든 것을 피할 수 있습니다.

업데이트: enpenax가 댓글로 지적한 바와 같이!==''ng-show는 전혀 불필요합니다.클리너 버전은 다음과 같습니다.

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

갱신(2015년 4월)

개발의 답변을 참조해 주세요.원래 제가 제안한 방법이 모든 브라우저에서 동작하는 것은 아닌 것 같습니다.

---

오리지널 (2014년 2월)

왜 그런 일이 일어나는지는 잘 모르겠지만, 어쨌든 해결할 방법이 있어요.컨트롤러에 다음 기능을 추가합니다.

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

빈 이미지에는, 다음의 소스가 표시됩니다.//:0이미지 누락 아이콘이 표시되지 않습니다(이 스레드의 상단 답변 참조).

다음으로, 다음의 방법으로 소스를 설정할 수 있습니다.

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

편집:

실제로 버튼 클릭을 다음과 같이 변경하는 것이 더 쉽습니다.

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

그러면 기능이 필요 없습니다.기능적인 방법이 더 낫다고 생각하지만요.

이 문제를 해결하는 또 다른 간단한 방법은 다음과 같습니다.<img ng-src="{{image?image:' '}}" />

공백으로 값 = ";을 설정하여 수정합니다.

표시되지 않도록 하기 위해 다음 css도 추가합니다.

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

진짜 이유는 https://github.com/angular/angular.js/issues/1218 에서 설명했습니다.

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 = ";

<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: 이미지 모델에 영향을 주지 않기 때문에 img 태그의 원래 src 속성에 대해 걱정할 필요가 없습니다.

「」를 비우는 .ng-src를 참조하십시오.

<img ng-src="{{image || '//:0' }}" />

//:0이 답변에서 확인할 수 있습니다.

요약:

현재 프로토콜을 채택하고 호스트 이름을 생략하고 포트를 0으로 설정합니다. 이 설정은 무효이며 네트워크 계층에 의해 중지되어야 합니다.

, 않고, ying also alsoyingying를 비우는 ng-src 「」를 간단하게 할 수 .ng-src합니다.ng-src비어 있어야 합니다.

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

이것은 예상대로 동작합니다.편집:

다른 작업도 가능하지만 문자열을 비웠을 수도 있습니다.

ng-click="superImage = ' '  

비울 수 있게 말이야404는 트리거되지 않습니다.

언급URL : https://stackoverflow.com/questions/22092687/empty-ng-src-doesnt-update-image