ng-src vs src 사용

ng-src vs src 사용

이 튜토리얼에서는 지침의 사용을 시연합니다.ngSrcsrc:

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

고객의 요구는 다음과 같습니다.

.ng-src로 바꿉니다.
Firebug, Chrome의 Web Inspector 등의 도구를 사용하거나 웹 서버 액세스 로그를 검사하여 앱이 실제로 /app/%7B%7에 대해 외부 요청을 하고 있는지 확인합니다.Bphone.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>

이유가 있나요?

Angular 문서에서

번잡한 글쓰기 방법:

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

올바른 쓰기 방법:

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

이는 각입니다.http://www.gravatar.com/avatar/{{hash}}되면 각도가 '각도가 되다'라고 .{{hash}} 해야 요.logo.png이 src Atribut으로 http://www.gravatar.com/avatar/logo.png이치노문제는 진행 중인 요청이 2개 있는데 첫 번째 요청이 실패했다는 것입니다.

를 해결하려면 , 을 해야 합니다.ng-src이것은 각도 지시이며 각도로 대체될 것이다.ng-src각 부트스트래핑과 컨트롤러가 완전히 로드된 후에만 src 속성으로 값을 지정합니다.{{hash}}이미 올바른 범위 값으로 대체되었을 것입니다.

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

했던 결과를 얻을 수 .phone.imageUrl각도가 로드된 후 해당 값으로 평가되고 대체됩니다.

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

,, 이음음이음음음음음음음음음음음음음음음음음 named named named named named named named named named named an an an 라는 이름의 이미지를 .{{phone.imageUrl}}이 경우 요구가 실패합니다.이것은 브라우저 콘솔에서 확인할 수 있습니다.

src="{{phone.imageUrl}}"는 불필요하며 브라우저에 의해 추가 요청이 생성됩니다. 2개의 브라우저로 구성됩니다.GET「 」 「 」 、 「 」 。

1. {{phone.imageUrl}}
2. 후img/phones/motorola-xoom.0.jpg

써야 요.ng-src시문지 <img ng-src="{{phone.imageUrl}}">는 단일 요청의 예상 결과를 보여줍니다.

---

덧붙여서, 같은 것이 에 적용된다.ng-href첫 번째 다이제스트 사이클이 시작될 때까지 링크가 끊어지지 않습니다.

되기 때문에 % 가 있습니다.HTML 가 한이 되는 HTML의 즉 HTML은 100% 의미가 있습니다.HTML 페이지가 한 줄씩 처리될 때는 이 이미지에 도달하고 이미지를 처리할 때쯤이면,phone.imageUrl아직 정의되지 않았습니다.

사실 Angular JS는 아직 HTML의 이 청크를 처리하지 않았고 이러한 자리 표시자를 찾지 않았으며 이러한 식을 값으로 대체하지 않았습니다.결과적으로 브라우저는 이 행을 취득하여 이 URL에서 이미지를 취득하려고 합니다.

물론 이 URL은 가짜입니다.이 URL에 콧수염과 곱슬곱슬한 괄호가 포함되어 있으면 404가 표시됩니다.그러나 Angular가 이 URL을 처리하면 이 URL이 올바른 URL로 대체되어 이미지가 표시되지만 404 오류 메시지는 콘솔에 남아 있습니다.

그럼 어떻게 하면 좋을까요?일반적인 HTML 트릭으로는 처리할 수 없습니다.하지만 Angular를 사용해서 해결할 수 있습니다.어떻게든 브라우저에 이 URL을 가져오려고 하지 말고 Angular가 이러한 플레이스 홀더를 해석할 준비가 되었을 때만 가져오라고 알려야 합니다.

표준 HTML 속성 대신 Angular 속성을 여기에 추가하는 방법이 있습니다.그리고 Angular 속성은ng-src이 HTML을 Angular가 입수하여 모든 식을 값으로 변환한 후에 이미지가 Import되었기 때문에 이제 오류가 없음을 알 수 있습니다.

언급URL : https://stackoverflow.com/questions/27554765/use-of-ng-src-vs-src