如何从Web服务器URL路径检索图像到angularJS [英] How to retrieve image from a web server url path to angularJS
问题描述
我正在尝试从Web服务器(端口9100)上检索图像，以显示在我的angularJS页面上.
I am trying to retrieve images from my web server (on port 9100) to display on my angularJS page.
我想在表格的特定单元格中显示图像.
I wanted to display the image in the particular cell in my table.
当我单击查看"按钮时，"04080b363fb9d8fe825c7c664bb7a38d.png"表上将显示"04080b363fb9d8fe825c7c664bb7a38d.png"图像.
Example like: "04080b363fb9d8fe825c7c664bb7a38d.png" image will be shown on the "04080b363fb9d8fe825c7c664bb7a38d.png" table when I click on the "view" button.
我的Web服务器apache文件夹:
My folder from web server apache:
我的GUI使用angularJS:
My GUI using angularJS:
我的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;
});
}]);
有人可以帮我吗?
推荐答案
为了获得预期的结果，我使用了很少的示例图像，并假设来自后端的数据将采用以下格式
To achieve the expected result, i have used few sample images with the assumption that the data from the backend will be in the format as below
$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":"
{"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 供参考
Codepen URL - http://codepen.io/nagasai/pen/jrMboq for reference.
希望这对您有用:)
这篇关于如何从Web服务器URL路径检索图像到angularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
