angularJS: Loading image as ng-src appears in $scope

Question

I have a function in my controller that calls the Wikipedia API upon clicking an anchor on my page, which loads some data about an author. You can see an example of this data here. If you look under Query > pages > id > thumbnail > original; you can see the url that I want assigned as ng-src upon calling this function.

So what happens is that my page loads, and the image is not showing (since it has no ng-src, I presume, but it's also not showing as broken - it's simply not there.

And when I call my function and update the object I want to call from the image still does not load.

Can somebody point out what I'm doing wrong?

my html:

<div class="authorInfoContainer" ng-show="author">
    <button ng-click="removeAuthor()">Close window</button>
    <img ng-src="{{page.thumbnail.original}}">
    <div class="container" ng-repeat="page in author.query.pages">
        {{ page.extract }}
    </div>
</div>

my controller (the relevant functions are getAuthorInfo and removeAtuhor - pasting the whole thing as I might have missed something):

'use strict';

angular.module('frontEndApp')
    .controller('WordsCtrl', function($scope, $http) {
        var url = 'http://localhost:3000/API/getWords';

        $scope.words = [];

        //custom order by function for the select drop-down
        $scope.orderByMe = function(x) {
            $scope.myOrderBy = x;
        };

        //function to get author info from wikipedia
        $scope.getAuthorInfo = function(author) {
            //remove whitespace from author
            author = author.replace(/\s/g, '+');
            //concat the get URL
            var url = 'https://en.wikipedia.org/w/api.php?action=query&format=json&uselang=user&prop=extracts%7Cpageimages&titles=' +
                author + '&piprop=name%7Coriginal';
            //get author info from wikipedia    
            $http.get(url)
                .then(function successCallback(response) {
                    $scope.author = response.data;
                }, function errorCallback(response) {
                    console.log(response);
                });
        };

        //function to clear author info
        $scope.removeAuthor = function() {
            $scope.author = null;
        };

        //function to get a random quote from the DB
        $scope.getRandomWord = function() {
            $http.get('http://localhost:3000/API/getRandomWord')
                .then(function successCallback(response) {
                    $scope.words = [];
                    $scope.words.push(response.data);
                }, function errorCallback(response) {
                    console.log(response);
                });
        };

        //get all quotes from the DB on page load
        $http.get(url)
            .then(function successCallback(response) {
                $scope.words = response.data;
            }, function errorCallback(response) {
                console.log(response);
            });
    });

The <img> tag should be inside the <div class="container">, since you are referring to the page variable that loops the author pages — Roberto Linares
– Roberto Linares, Commented Mar 15, 2016 at 14:37

David Ballester · Accepted Answer · 2016-03-15 14:25:58Z

1

In your template you're refering to a page variable on the scope that you never set. You set, however an author, which, as your ng-repeat points out, contains the pages. However, the page you access from outside the ng-repeat is not defined.

answered Mar 15, 2016 at 14:25

David Ballester

5773 silver badges17 bronze badges

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

Comments

Rafael Grillo · Accepted Answer · 2016-03-15 14:25:27Z

0

I think you are missing data in your example. What is $scope.page ? Since you are using {{page.thumbnail.original}}

answered Mar 15, 2016 at 14:25

Rafael Grillo

2322 silver badges8 bronze badges

Collectives™ on Stack Overflow

angularJS: Loading image as ng-src appears in $scope

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related