[angularjs] ng-src 대 src 사용

Program / 글쓴이

이 자습서 에서는 다음 ngSrc대신 지시문을 사용하는 방법을 보여줍니다 src.

<ul class="phones">
    <li ng-repeat="phone in phones" class="thumbnail">
        <img ng-src="{{phone.imageUrl}}">
    </li>
</ul>

그들은 다음을 요청합니다.

ng-src 지시문을 일반 이전 src 속성으로 대체하십시오.
Firebug 또는 Chrome의 Web Inspector와 같은 도구를 사용하거나 웹 서버 액세스 로그를 검사하여 앱이 실제로 /app/%7B%7Bphone.imageUrl%7D%7D (또는
/ app / {{phone .imageUrl}} ).

나는 그렇게했고 올바른 결과를 얻었습니다.

<li class="thumbnail ng-scope" ng-repeat="phone in phones">
    <img src="img/phones/motorola-xoom.0.jpg">
</li>

이유가 있습니까?

답변

<img ng-src="{{phone.imageUrl}}">

phone.imageUrl각도가로드 된 후 값으로 평가되고 대체 되기 때문에 예상 한 결과를 얻을 수 있습니다 .

<img src="{{phone.imageUrl}}">

그러나이를 통해 브라우저는라는 이미지를로드하려고 시도하므로 {{phone.imageUrl}}요청이 실패합니다. 브라우저 콘솔에서 확인할 수 있습니다.

답변

Angular 문서에서

작성하는 버그가있는 방법 :

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

작성하는 올바른 방법 :

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

왜? 이는 페이지로드시 각도 부트 스트랩 및 컨트롤러 생성 전에 브라우저가 이미지로드를 시도하고 http://www.gravatar.com/avatar/{{hash}}실패하기 때문입니다. 그런 다음 angular가 시작되면 {{hash}}say로 바꿔야 함을 이해합니다 logo.png. 이제 src 속성이로 변경 http://www.gravatar.com/avatar/logo.png되고 이미지가 올바르게로드됩니다. 문제는 2 개의 요청이 진행되고 첫 번째 요청이 실패한다는 것입니다.

이 문제를 해결 ng-src하려면 각도 지시문을 사용해야 하며 각도는 각도 부트 스트랩 및 컨트롤러가 완전히로드 된 후에 만ng-src 값을 src 속성 으로 대체 하고 그 당시에 는 이미 올바른 범위 값으로 대체되었을 것입니다.{{hash}}

답변

은 src="{{phone.imageUrl}}"불필요하며 브라우저에 의해 추가 요청을 만듭니다. 브라우저는 GET해당 이미지를로드하기 위해 최소 2 개의 요청을합니다.

  1. 식이 평가되기 전 {{phone.imageUrl}}
  2. 식이 평가 된 후 img/phones/motorola-xoom.0.jpg

ng-srcAngular 표현식을 다룰 때는 항상 지시문을 사용해야 합니다. <img ng-src="{{phone.imageUrl}}">단일 요청의 예상 결과를 제공합니다.

참고로ng-href 첫 번째 다이제스트 사이클이 시작될 때까지 링크가 끊어지지 않도록 동일한 내용이 적용됩니다 .

답변

실제로는 HTML이 순차적으로 처리되고이 HTML 페이지가 한 줄씩 처리 될 때이 이미지, 줄 및 이미지 처리시에는 phone.imageUrl아직 정의되지 않았기 때문에 100 % 의미가 있습니다 .

사실 Angular JS는 아직이 HTML 청크를 처리하지 않았으며 아직 이러한 자리 표시자를 찾고 이러한 표현식을 값으로 대체하지 않았습니다. 결국 브라우저는이 줄을 가져와이 URL에서이 이미지를 가져 오려고합니다.

물론 이것은 가짜 URL입니다. 콧수염과 중괄호가 여전히 포함되어 있으므로 404를 제공하지만 당연히 Angular가이 URL을 처리하면이 URL을 적절한 URL로 대체 한 다음 여전히 이미지가 표시되지만 404 오류 메시지는 콘솔에 남아 있습니다.

그래서, 우리는 이것을 어떻게 처리 할 수 ​​있습니까? 글쎄, 우리는 일반적인 HTML 트릭을 사용하여 이것을 처리 할 수 ​​없습니다. 그러나 Angular를 사용하여 처리 할 수 ​​있습니다. 이 URL을 가져 오려고하지 않고 Angular가 이러한 자리 표시자를 해석 할 준비가되었을 때만 동시에 가져 오도록 브라우저에 지시해야합니다.

한 가지 방법은 표준 HTML 대신 Angular 속성을 여기에 넣는 것입니다. 그리고 Angular 속성은 ng-src. 이제 다시 돌아 가면 Angular가이 HTML을 잡고 모든 표현식을 값으로 번역 한 후에 만 ​​이미지를 가져 오기 때문에 더 이상 오류가 없음을 알 수 있습니다.

답변