logo标签列表

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

javascripthtmlangularjsangularjs-scopeangularjs-ng-repeat
13

我的问题：

我想使用ng-repeat指令显示存储在本地的图片列表，但是这些图片没有被显示。

AngularJS版本：1.2.22

代码：

  • 目录结构：

    myapp/
  |--- common/
  |    |--- images/
  |         |--- image.png
  |
  |--- subapp1/
  |    |--- index.html
  |    |--- subapp1.js
  |    |
  |    |--- controllers/
  |    |    |--- SubApp1Controller.js
  |    |
  |    |--- views/
  |    |    |--- 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"});
});
  • SubApp1控制器.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>

额外信息：

图片未加载，控制台中也没有打印错误消息。

我打开了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>
如果我在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

我已经阅读了许多关于类似问题的帖子和问答，但是它们都没能解决我的问题。有人知道怎么回事吗？

提前感谢。

这可能是Angular对srv进行了清理，并默认认为file://协议不安全的问题。尝试使用http[s]:// URL，看看是否可以解决问题。 - gkalpak
1个回答
27

对于IMG标记和AngularJS，请仅使用ng-src属性。

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

{{media.imagePath}}必须包含图片的URL，绝对或相对。

谢谢你回答这个问题。我不知道发生了什么，但它开始工作了。我按照你的建议删除了data-前缀，重新加载页面，它就正常工作了，然后我又添加了data-前缀，重新加载页面，它仍然正常工作。对我来说，这仍然是一个谜，但现在它能正常工作了。关于data-前缀，我想使用它来保持HTML5代码的有效性。 - notrev
1
我认为最好只使用一个属性，不要混合使用data-ng-src、ng-src和src。 - jordiburgos
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接