Question

我正在尝试从我的网络服务器（在端口9100上）检索图像，以显示在我的angularJS页面上。

我想在我桌子的特定单元格中显示图像。

示例如：“04080b363fb9d8fe825c7c664bb7a38d.png”图像将在“04080b363fb9d8fe825c7c664bb7a38d.png”表格中显示，当我点击“查看”按钮时。

来自网络服务器apache的我的文件夹：

使用angularJS的我的GUI：

我的HTML代码：

<!DOCTYPE html>
<html ng-app="camListApp">
<head>

<style>
#myDIV {
width: 500px;
height: 500px;
position: relative;
right: 20px;
top: 90px;
}

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
 </style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js">   </script>
<script src="hello.js"></script>

<title>Image viewers</title>
</head>

 <body>
 <div ng-controller="Hello">
 <h3>Search:</h3><br>
<select ng-model="searchBox.cameraid" style="width:25%">
  <option ng-repeat="x in records | unique:'cameraid'" value=" {{x.cameraid}}">{{x.cameraid}}</option>
  </select>
<br>
<br>
<br>
<br>
 <table style="width:55%">
    <thead>
      <tr>

        <th>CamID</th>
        <th>Timestamp</th>
        <th>View Image</th>

      </tr>
    </thead>

    <tbody>

      <tr ng-repeat="record in records | filter:searchBox | orderBy:'+timestamp'">

        <td>{{record.cameraid}}</td>
        <td>{{record.timestamp}}</td>
         <td>{{record.filename}}</td>
        <td><button ng-click="toggleCustom()" onclick="myFunction()">View</button></td>

      </tr>
    </tbody>
   </table>
   <span id="myDIV" ng-hide="custom">
   <img ng-src="" width="300" height="300">
    </span>
    <span ng-show="custom"></span>
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.position = "absolute";
}
</script>

</body>
</html>

我的js文件：

var camListApp = angular.module('camListApp', []);
camListApp.filter('unique', function() {
    return function(input, key) {
        var unique = {};
        var uniqueList = [];
        for(var i = 0; i < input.length; i++){
            if(typeof unique[input[i][key]] == "undefined"){
                unique[input[i][key]] = "";
                uniqueList.push(input[i]);
            }
        }
        return uniqueList;
    };
  });
  camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){


  $scope.custom = true;
  $scope.toggleCustom = function() {
   $scope.custom = ! $scope.custom;

 };
 $http.get('http://localhost:8081/camera/list').then(function(response) {
     console.log(response);
        $scope.records= response.data; 
    });
  }]);

有人可以帮我吗？

Answer 1

为了达到预期的效果，我假设来自后端的数据格式如下，我使用了少量的样本图像

 $scope.records=[{"id":23,"cameraid":"001","timestamp":"2016/06/15 17:27","filename":"http://www.w3schools.com/css/img_fjords.jpg"},

{“id”：24，“cameraid”：“002”，“timestamp”：“2016/06/15 17:28”，“filename”：“http://www.w3schools.com/css/img_forest.jpg”}， {“id”：25，“cameraid”：“003”，“timestamp”：“2016/06/15 17:28”，“filename”：“http://www.w3schools.com/css/img_lights.jpg”}， {“id”：26，“cameraid”：“003”，“timestamp”：“2016/06/15 17:28”，“filename”：“http://www.w3schools.com/css/img_mountains.jpg”}]

Codepen URL - http://codepen.io/nagasai/pen/jrMboq供参考。

希望这适合你：）

如何从web服务器URL路径检索到angularJS的图像

1 个答案: