在 AngularJS 中顯示影象

Rana Hasnain Khan 2023年1月30日 2022年5月31日
  1. 在 AngularJS 中顯示影象
  2. 在 AngularJS 中顯示多個影象
在 AngularJS 中顯示影象

我們將通過示例介紹如何在 AngularJS 中新增影象。

在 AngularJS 中顯示影象

影象是任何 Web 應用程式或網站中最重要的部分。我們將使用 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 應用程式中新增影象非常簡單。

在 AngularJS 中顯示多個影象

現在,讓我們通過另一個示例並嘗試從 JSON 新增多個影象。

下面的 HTML 標記包含一個 HTML div,已為其提供 ng-appng-controller 指令。HTML div 包含一個 HTML 按鈕和由影象元素組成的表格,這些元素將使用 ng-repeat 指令從 JSON 陣列中解決。

該按鈕已被賦予 ng-click 指令。當按鈕被點選時,控制器的通用表格函式被命名。

使用通用表函式建立 JSON 物件並將其分配給消費者 JSON 陣列。

JSON 物件包含 consumerIdNamePhoto 欄位。Photo 欄位提供影象的 URL。

ng-repeat 指令名稱暗示基於集合長度的元素。

在這個系統中,它將重複 tr 元素。HTML 的 tbody 元素已被指定為 ng-repeat 指令以重複消費者 JSON 陣列的所有專案。

consumer JSON 陣列中的每個 JSON 物件開發一個 tr 元素並將其附加到 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>

輸出:

在 angularJs 中新增多個影象

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

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