AngularJS에 이미지 표시
AngularJS에 이미지를 추가하는 방법을 예제와 함께 소개합니다.
AngularJS에 이미지 표시
이미지는 웹 애플리케이션이나 웹사이트에서 가장 중요한 부분입니다. ng-src 지시문을 사용하여 단일 이미지를 추가합니다.
AngularJS의 ng-repeat 지시문 안에 이미지를 표시하는 방법에 대해 설명합니다. ng-src 순서는 AngularJS에서 모델의 이미지를 표시하기 위해 이미지 요소와 함께 사용됩니다.
이미지는 서버의 폴더에 보관됩니다. 그리고 AngularJS의 ng-src 지시문에 이미지의 경로를 설정하여 표시됩니다.
예제를 살펴보고 ng-src 지시문을 사용하여 단일 이미지를 표시해 보겠습니다.
# AngularJS
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngApp', [])
app.controller('ngController', function ($scope) {
});
</script>
<div ng-app="ngApp" ng-controller="ngController">
<img alt="" ng-src="https://www.delftstack.com/ezoimgfmt/d33wubrfki0l68.cloudfront.net/7748c5aa61aa13fd4c346e3cbfebe49f2dd4d580/2738b/assets/img/logo.png?ezimgfmt=rs:187x36/rscb5/ng:webp/ngcb5"/>
</div>
</body>
</html>
출력:
위의 예에서 볼 수 있듯이 AngularJS 애플리케이션 내부에 이미지를 추가하는 것은 매우 간단합니다.
AngularJS에서 여러 이미지 표시
이제 다른 예를 살펴보고 JSON에서 여러 이미지를 추가해 보겠습니다.
아래 HTML 마크업에는 ng-app 및 ng-controller 지시문이 제공된 HTML div가 포함되어 있습니다. HTML div에는 ng-repeat 지시문을 사용하여 JSON 배열에서 해결될 이미지 요소로 구성된 HTML 버튼과 테이블이 포함되어 있습니다.
버튼에 ng-click 지시문이 지정되었습니다. 컨트롤러의 일반 테이블 기능은 버튼을 클릭할 때 이름이 지정됩니다.
JSON 객체가 생성되어 일반 테이블 함수를 사용하여 소비자 JSON 배열에 할당됩니다.
JSON 개체는 consumerId, Name 및 Photo 필드를 포함합니다. Photo 필드는 이미지의 URL을 제공합니다.
ng-repeat 지시어 이름은 컬렉션의 길이에 따라 요소를 의미합니다.
이 시스템에서는 tr 요소를 반복합니다. HTML의 tbody 요소는 소비자 JSON 배열의 모든 항목을 반복하도록 ng-repeat 지시문으로 지정되었습니다.
tr 요소가 개발되어 consumer JSON 배열의 각 JSON 개체에 대한 HTML 테이블에 추가됩니다. Photo 필드는 ng-src 지시문에 할당되어 아래와 같이 모델에서 이미지 URL을 읽고 이미지를 표시합니다.
# AngularJS
<html>
<head>
<title>Consumers</title>
</head>
<style>
td{
border: 1px solid black;
}
</style>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngApp', [])
app.controller('ngController', function ($scope) {
$scope.IsVisible = false;
$scope.GetData = function () {
$scope.consumer= [
{ consumerId: 1, Name: "Google", Photo: "Images/1.jpg" },
{ consumerId: 2, Name: "Delft Stack", Photo: "Images/2.jpg" },
{ consumerId: 3, Name: "Yahoo", Photo: "Images/3.jpg" },
];
$scope.IsVisible = true;
};
});
</script>
<div ng-app="ngApp" ng-controller="ngController">
<input type="button" value="Get Data" ng-click="GetData()" />
<hr />
<table cellpadding="0" cellspacing="0" ng-show="IsVisible">
<tr>
<th>Company Id</th>
<th>Name</th>
<th>Logo</th>
</tr>
<tbody ng-repeat="m in consumer">
<tr>
<td>{{m.consumerId}}</td>
<td>{{m.Name}}</td>
<td><img alt="{{m.Name}}" ng-src="{{m.Photo}}"/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
출력:
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn