Comment afficher des images dans un tag img à l'intérieur d'une ng-repeat en utilisant Angular JS?

Mon problème:

Je veux afficher une liste d'images, stockées localement, en utilisant ng-repeat directive, mais les images ne sont affichées.

AngularJS version: 1.2.22

Le code:

  • Structure De Répertoire:
    myapp/
    |--- common/
    | |--- images/
    | |--- image.png 
    | 
    |--- subapp1/
    | |--- index.html 
    | |--- subapp1.js 
    | | 
    | |--- contrôleurs/
    | | |--- SubApp1Controller.js 
    | | 
    | |--- points de vue/
    | | |--- imageListView.html
  • index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="SubApp1">
<head>
    <meta charset="utf-8" />
</head>

<body>
    <div id="page" data-ng-view="">
    </div>

    <!-- Include required libs, models and controllers -->
    <script type="text/javascript" src="../common/libs/angular.min.js"></script>
    <script type="text/javascript" src="../common/libs/angular-route.min.js"></script>
    <script type="text/javascript" src="../common/libs/angular-touch.min.js"></script>

    <!-- Controllers -->
    <script type="text/javascript" src="controllers/SubApp1Controller.js"></script>

    <!-- App Module (main) -->
    <script type="text/javascript" src="subapp1.js"></script>
</body>
</html>
  • subapp1.js
//Instantiate the SubApp1 Module.
var subApp1 = angular.module("SubApp1", ["ngRoute", "ngTouch"]);

//Setting Controllers
subApp1.controller("SubApp1Controller",
        ["$scope", SubApp1Controller]
);

//Define the routes for the module.
subApp1.config(function ($routeProvider) {
    $routeProvider.when("/home", {
        controller: "SubApp1Controller",
        templateUrl: "views/imageListView.html"
    }); 

    $routeProvider.otherwise({redirectTo: "/home"});
});
  • SubApp1Controller.js
function SubApp1Controller($scope)
{
    /**
     *  Private Method: _run()
     *  The main function of the SubApp1Controller, where all the magic
     *      happens.
     */
    function _run() {
        //this variable will define which style will be loaded on the image list view 
        $scope.section = "subapp1";

        var imageSource;

        imageSource = "../common/images/image.png";

        //list of media elements to be displayed on the list
        $scope.mediaList = [
            {
                thumbnailPath: imageSource,
                imagePath: imageSource,
            },
            {
                thumbnailPath: imageSource,
                imagePath: imageSource,
            },
            {
                thumbnailPath: imageSource,
                imagePath: imageSource,
            },
            {
                thumbnailPath: imageSource,
                imagePath: imageSource,
            },
            {
                thumbnailPath: imageSource,
                imagePath: imageSource,
            },
        ];
    };

    //Runs the main method of this class
    _run();
}
  • imageListView.html
<div class="grid-background"></div>

<header class="grid-header {{section}}">
    <div class="button-right"></div>
</header>

<ul id="grid" class="grid">
    <li class="grid-item" data-ng-repeat="media in mediaList">
        <img data-ng-src="{{media.thumbnailPath}}" data-src="{{media.imagePath}}"/>
    </li>
</ul>

Infos supplémentaires:

Les images ne sont pas chargées et aucun message d'erreur est imprimé dans la console.

J'ai ouvert l'Inspecteur Web de l'outil pour voir ce qui a été traité dans l'élément li et elle n'a pas l'attribut src, voir ci-dessous:

<li class="grid-item ng-scope" data-ng-repeat="media in mediaList">
        <img data-ng-src="../common/images/image.png" data-src="../common/images/image.png" />
</li>

Si j'ajoute l'attribut src de l'élément img, il est chargé, mais j'obtiens une erreur, voir ci-dessous:

<li class="grid-item" data-ng-repeat="media in mediaList">
    <img data-ng-src="{{media.thumbnailPath}}"
         data-src="{{media.imagePath}}"
         src="{{media.thumbnailPath}}"
    />
</li>

<!-- Error message printed in the console -->
GET file:///[ABS_PATH]/%7B%7Bmedia.thumbnailPath%7D%7D net::ERR_FILE_NOT_FOUND 

J'ai lu de nombreux messages et questions/réponses sur des questions similaires, mais aucun d'entre eux travaillaient pour moi. Quelqu'un a une idée?

Merci d'avance.

source d'informationauteur notrev