在 AngularJS 中显示图像

当前位置：主页 > 学无止境 > WEB前端 > Angular >

Vue React JavaScript Angular CSS HTML

在 AngularJS 中显示图像

作者：迹忆客最近更新：2023/05/09 浏览次数：

我们将通过示例介绍如何在 AngularJS 中添加图像。

在 AngularJS 中显示图像

图像是任何 Web 应用程序或网站中最重要的部分。我们将使用 ng-src 指令添加单个图像。

我们将讨论在 AngularJS 的 ng-repeat 指令中显示图像。ng-src 顺序与图像元素一起使用，以在 AngularJS 中显示来自模型的图像。

图像将保存在服务器上的文件夹中。它将通过将图像的路径设置为 AngularJS 中的 ng-src 指令来显示。

让我们通过一个示例并使用 ng-src 指令显示单个图像。

<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.jiyik.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 标记包含一个 HTML div，已为其提供 ng-app 和 ng-controller 指令。HTML div 包含一个 HTML 按钮和由图像元素组成的表格，这些元素将使用 ng-repeat 指令从 JSON 数组中解决。

该按钮已被赋予 ng-click 指令。当按钮被点击时，控制器的通用表格函数被命名。

使用通用表函数创建 JSON 对象并将其分配给消费者 JSON 数组。

JSON 对象包含 consumerId、Name 和 Photo 字段。Photo 字段提供图像的 URL。

ng-repeat 指令名称暗示基于集合长度的元素。

在这个系统中，它将重复 tr 元素。HTML 的 tbody 元素已被指定为 ng-repeat 指令以重复消费者 JSON 数组的所有项目。

为 consumer JSON 数组中的每个 JSON 对象开发一个 tr 元素并将其附加到 HTML 表中。Photo 字段将分配给 ng-src 指令，该指令将从模型中读取图像 URL 并显示图像，如下所示。

<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: "迹忆客", 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>