Question

您好我正在构建一个应用程序，我想动态更改图像的来源以强制重新加载它。问题是，按此顺序，我只能在浏览器上获得损坏的图像。相反，如果通过按钮手动运行该功能，它将运行完美。

HTML文档

<!DOCTYPE html>
<html lang="en" ng-app='cameraApp'>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Node JS Camera</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
        <script src='https://code.angularjs.org/1.4.4/angular-sanitize.min.js'></script>
        <script src="cameraApp.js"></script>
    </head>
    <body>
        <div class="container-fluid">
            <div class="jumbotron">
                <h1>Welcome to NodeJS Camera v1</h1>
            </div>
            <div ng-controller="HomeController">
                <div class="cameraControl col-md-5">
                    <p>Here is the camera control</p>
                    <button class="btn btn-default" ng-click="getSnapshot()">Snapshot</button>
                    <button class="btn btn-info" ng-click="intervalFunction()">Start Feed</button>    
                </div>
                <div class="lifeFeed col-md-7">
                    <p>Here is the live feed</p>
                    <p><button class="btn btn-default" ng-click="readSnapshot()">Snapshot Read</button></p>
                    <img width='600' height='600' ng-src="{{snapshot}}" alt="SnapShot taken">
                </div>
            </div>
        </div>
    </body>
</html>

cameraApp.js

var cameraApp = angular.module('cameraApp',[]);

cameraApp.controller('HomeController', function($scope,$http,$timeout) {
    function updateImage() {
        var img = 'snapshots/camera.jpg'+  '?decache=' + Math.random();
        console.log('Snapshot Loaded');
        $scope.snapshot = img;  
    };

    $scope.readSnapshot = updateImage;

    $scope.getSnapshot = function() {
        $http.get('/api/getSnapshot')
        .then(function(response) {
            // this callback will be called asynchronously
            // when the response is available
            console.log('Snapshot captured');
            $scope.readSnapshot();
        }, function(response) {
            console.log('Error in capturing...');
        }); 
    }

    $scope.intervalFunction = function() {
        $timeout(function() {
            $scope.getSnapshot();
            $scope.intervalFunction();
        }, 2000);
    };

    // Kick off the interval
    $scope.intervalFunction();
});

Angularjs无法动态更改图像src

0 个答案: