404 errors for src items in Angular Application

Question

I have a question about improving my program. Currently I am working on an AngularJS application. The application reads configurations from a database. According to whether the configuration is up and running on a server i want to show some colored buttonimage, indicating the state the configuration is in. This is what my htmlpage looks like :

    <ul id="configContainer">
        <li ng-repeat="config in configs | filter : searchTerm"><span
            ng-click="go('/keypoints/', config.id)">{{config.name}}</span> <span
            class="right"> 

            <img title="state" alt="state" id="stateImage"
                src={{config.stateImage}} class="iconstate" role="button"></span></li>
    </ul>

This is what my angular controller looks like:

            // set-up
            $scope.configs = [];

            getConfigurations();
            // functions
            function getConfigurations() {
                SomeService.getConfigurations().then(function(data) {
                    $scope.configs = data;
                    getStates();
                }, function(errorMessage) {
                    console.log("Error: " + errorMessage);
                });
            };

            function getStates() {
                for (i=0; i < $scope.configs.length; i++) {
                    setStateIcon(i);
                }
            }

            function setStateIcon(configi) {
                SomeService.getState($scope.configs[configi].id).then(function(data) {
                    if (data.name == "Started") {
                        $scope.configs[configi].stateImage = "images/ic_greenb.png";
                    }
                    else if (data.name == "Stopped") {
                        $scope.configs[configi].stateImage = "images/ic_redb.png";
                    }
                    else if (data.name == "Starting") {
                        $scope.configs[configi].stateImage = "images/ic_yellowb.png";
                    }

                });
            };

Executing my code makes everything work fine, images are being showed etc, but inspecting the element in my browser still throws the following error: %7B%7Bconfig.stateImage%7D%7D 404 (Not Found). Why is that? Is there a better way to implement what I want to do?

I corrected your title to be more in line with the question you are asking here. — Claies
– Claies, Commented Mar 13, 2015 at 10:36

Claies · Accepted Answer · 2015-03-13 10:33:16Z

2

You should always use ng-src instead of src when your target is an angular expression {{ }}.

when using src=, the browser tries to fetch the object from the server before angular has had time to replace the expression. This results in server calls to {{config.stateImage}}, which is obviously not a valid URL. ng-src= will render a normal src= URL only after it has processed the expression.

answered Mar 13, 2015 at 10:33

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

404 errors for src items in Angular Application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related