如何在使用Angular JS时在ng-repeat内的img标签中显示图像？

Question

My problem: 我的问题：

I want to display a list of images, stored localy, using ng-repeat directive, but the images re not being displayed. 我想显示一个图像列表，使用ng-repeat指令存储localy，但图像没有显示。

AngularJS version: 1.2.22 AngularJS版本：1.2.22

The code: 代码：

Directory Structure: 目录结构：

 myapp/ MYAPP /\n  |--- common/ | ---普通/\n  | | |--- images/ | --- images /\n  | | |--- image.png | --- image.png\n  | |\n  |--- subapp1/ | --- subapp1 /\n  | | |--- index.html | --- index.html\n  | | |--- subapp1.js | --- subapp1.js\n  | | | |\n  | | |--- controllers/ | ---控制器/\n  | | | | |--- SubApp1Controller.js | --- SubApp1Controller.js\n  | | | |\n  | | |--- views/ | --- views /\n  | | | | |--- imageListView.html | --- imageListView.html

index.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 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 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 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>

Extra info: 额外信息：

The images are not being loaded and no error message is printed in the console. 未加载图像，控制台中未打印错误消息。

I opened the Web Inspector tool to see what was processed in the li element and it did not have the src attribute, see bellow: 我打开了Web Inspector工具，看看在li元素中处理了什么，并且它没有src属性，请参阅下面的内容：

<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>

If I add the src attribute in the img element, it is loaded, but I get an error, see bellow: 如果我在img元素中添加src属性，它会被加载，但是我收到一个错误，请看下面的内容：

<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

I have read many posts and questions/answers about similar issues, but none of them worked for me. 我已经阅读了很多关于类似问题的帖子和问题/答案，但没有一个对我有用。 Does anyone have a clue? 有人有线索吗？

Thanks in advance. 提前致谢。

Answer 1

For IMG tags and AngularJS, use just the ng-src attribute. 对于IMG标签和AngularJS，只使用ng-src属性。

<img ng-src="{{media.imagePath}}" />

{{media.imagePath}} must contain the URL to the image, absolute or relative. {{media.imagePath}}必须包含图像的URL，绝对或相对。

如何在使用Angular JS时在ng-repeat内的img标签中显示图像？

问题描述

1 个解决方案

解决方案1
27 已采纳 2014-08-21 18:44:57

如何在使用Angular JS时在ng-repeat内的img标签中显示图像？

问题描述

1 个解决方案

解决方案1 27 已采纳 2014-08-21 18:44:57

解决方案1
27 已采纳 2014-08-21 18:44:57