AngularJS에선 이미지엔 ng-src를 사용하세요

AngularJS에서는 이미지 URL을 ngSrc를 사용해서 삽입해야 합니다!!

물론 Static한 이미지 URL은 직접 입력하여도 무방합니다만,

여기서는 $http를 통해 받은 데이터, 즉, 서버에서 넘겨 받은 정보를 토대로 적용할 때에는 <img> 태그 안에 ngSrc에 url 정보를 입력해야합니다.

---

https://code.angularjs.org/1.2.26/docs/tutorial/step_06

---

angularJS tutorial 6번째 수업에서는 링크와 이미지 입력에 대해서 공부합니다.

Data는 $http.get 메소드를 통해 서버가 존재하지 않으므로, 임시로 JSON 내역을 저장한 데이터를 읽어서 사용할 것입니다.

Data의 샘플 형태는 아래와 같습니다.

[
{
  ...
  "id": "motorola-defy-with-motoblur",
  "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
  "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
  ...
},
...
]

id는 링크에 삽입 될 부분이며, imageUrl은 ngSrc를 통해 삽입되어 이미지를 출력할 것입니다.(이미지는 img/phones 폴더 아래에 존재해야함 )

아래는 출력 될 샘플입니다.

                <div class="media" ng-repeat="phone in phones | filter:query | orderBy:orderProp">
                    <a class="media-left" href="#/phones/{{phone.id}}">
                        <img class="pull-left thumbnail" ng-src="{{phone.imageUrl}}" width="100" height="100">
                    </a>
                    <div class="media-body" style="padding : 10px;">
                        <h4 class="media-heading"><a href="#/phones/{{phone.id}}">{{phone.name}}</a></h4>
                        <p>{{phone.snippet}}</p>
                    </div>
                </div>

기타 AngularJS 태그들에 대해서는 기초적인 부분이니 홈페이지에서 공부하세요~!!

( 저도 영어를 잘 못하지만, 천천히 하자는 의미에서 하나하나 읽어가며 하고있습니다. 한글 번역본이나 한국분이 작성한 책도 좋긴하지만, 외국에서는 codeacademy나 egghead.io와 같은 좋은 튜토리얼 사이트가 많이 있습니다. )

ng-src 대신 src를 사용하게 될경우 src에 들어가는 ng 표현식을 제대로 인식하지 못하여, url이 정삭정으로 기입되지 않습니다. 위에서 언급하였듯이, 정적인 이미지에 대해서는 이미 서버내 URL이 존재하는 것이기 때문에 상관없지만, 데이터를 ng Http 요청으로 받아온 데이터는 ng-src에 표현식을 써서 입력해야 합니다.

P.S. CSS는 부트스트랩을 사용하여 공부하고 있습니다.

아래는 위 소스가 추가된 튜토리얼 단계 06번 화면입니다. 부트스트랩의 디자인을 조금씩 추가하면서 사용하기 때문에 실제 사이트와 유사하나 약간 다르게 보일겁니다~!