使用Angular JS时如何在ng-repeat内的img标签中显示图像？
Posted
技术标签:
【中文标题】使用Angular JS时如何在ng-repeat内的img标签中显示图像？【英文标题】：How to show images in img tag inside an ng-repeat while using Angular JS? 【发布时间】：2014-10-15 11:08:51 【问题描述】：我的问题：
我想使用 ng-repeat 指令显示本地存储的图像列表，但图像没有显示。
AngularJS 版本：1.2.22
代码：
目录结构：
我的应用程序/ |--- 常见/ | |--- 图片/ | |--- 图片.png | |--- subapp1/ | |--- 索引.html | |--- subapp1.js | | | |--- 控制器/ | | |--- SubApp1Controller.js | | | |--- 浏览量/ | | |--- 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>
// 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");
);
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();
<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]:// 网址，看看它是否有效。
【参考方案1】：
对于 IMG 标签和 AngularJS，只使用 ng-src 属性。
<img ng-src="media.imagePath" />
media.imagePath 必须包含图像的绝对或相对 URL。
【讨论】：
感谢您回答这个问题。我不知道发生了什么，但它开始工作了。我按照您的建议删除了 data- 前缀，重新加载了页面并且它可以工作，然后我再次添加了 data- 前缀，重新加载了页面并且它仍然可以工作。这对我来说仍然是一个谜，但它现在正在工作。关于 data- 前缀，我想用它来保持 HTML5 的有效代码。 我认为最好只使用一个属性，不要混合使用data-ng-src、ng-src和src。以上是关于使用Angular JS时如何在ng-repeat内的img标签中显示图像？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 angular.js 中解析 ng-repeat 中的 HTML [重复]
如何在angular js中的重复中间停止ng-repeat