如何從Web服務器url路徑檢索圖像到angularJS

我想從我的web服務器（在端口9100上）檢索圖像以顯示在我的angularJS頁面上。如何從Web服務器url路徑檢索圖像到angularJS

我想在我的表格中的特定單元格中顯示圖像。

例如：當我點擊「查看」按鈕時，「04080b363fb9d8fe825c7c664bb7a38d.png」圖片將顯示在「04080b363fb9d8fe825c7c664bb7a38d.png」表中。

從Web服務器Apache的我的文件夾：

使用我的GUI 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; 
    }); 
    }]);

能夠有人幫我解決這個問題嗎？

來源

2016-06-16 Alvin Wee

你會得到數據響應？ –

@RIYAJKHAN我還沒有嘗試從我的文件夾中檢索圖像到angularjs。因爲我不知道該怎麼做。 –

爲了實現預期的結果，我已經使用幾個樣本圖像與假設從後端數據將在格式如下

$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供參考。

希望這適用於你:)

來源

2016-06-18 01:20:14

你再次幫我！有用！ –

謝謝Alvin Wee ...在可能的情況下爲我答覆我的答案:) –

當您點擊圖片時，您是否知道如何放大圖片？ –

如何從Web服務器url路徑檢索圖像到angularJS

回答

相關問題