使用Angular JS时如何在ng-repeat内的img标签中显示图像? - IT屋-程序员软件开发技术分享社区
首页 前端开发 使用Angular JS时如何在ng-repeat内的img标签中显示图像?
使用Angular JS时如何在ng-repeat内的img标签中显示图像?
[英] How to show images in img tag inside an ng-repeat while using Angular JS?
本文介绍了使用Angular JS时如何在ng-repeat内的img标签中显示图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的问题:
我想使用 ng-repeat 指令显示存储在本地的图像列表，但未显示图像.
AngularJS 版本:1.2.22
代码:
<html lang="en" data-ng-app="SubApp1"><头><meta charset="utf-8"/><身体><div id="page" data-ng-view=""> <!-- 包括所需的库、模型和控制器--><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><!-- 控制器--><script type="text/javascript" src="controllers/SubApp1Controller.js"></script><!-- 应用模块(主)--><script type="text/javascript" src="subapp1.js"></script>
</html>
//实例化 SubApp1 模块.var subApp1 = angular.module("SubApp1", ["ngRoute", "ngTouch"]);//设置控制器subApp1.controller("SubApp1Controller",["$scope", SubApp1Controller]);//定义模块的路由.subApp1.config(function ($routeProvider) {$routeProvider.when("/home", {控制器:SubApp1Controller"，templateUrl: "views/imageListView.html"});$routeProvider.otherwise({redirectTo: "/home"});});
function SubApp1Controller($scope){/*** 私有方法:_run()* SubApp1Controller 的主要功能，所有的魔法都在这里* 发生.*/函数_运行(){//此变量将定义将在图像列表视图上加载的样式$scope.section = "subapp1";无功图像源；imageSource = "../common/images/image.png";//要显示在列表上的媒体元素列表$scope.mediaList = [{缩略图路径:图像源，图像路径:图像源，},{缩略图路径:图像源，图像路径:图像源，},{缩略图路径:图像源，图像路径:图像源，},{缩略图路径:图像源，图像路径:图像源，},{缩略图路径:图像源，图像路径:图像源，},];};//运行这个类的main方法_跑();}
<header class="grid-header {{section}}"><div class="button-right"></div></标题><ul id="grid" class="grid"><li class="grid-item" data-ng-repeat="mediaList 中的媒体"><img data-ng-src="{{media.thumbnailPath}}" data-src="{{media.imagePath}}"/>
额外信息:
图像未加载，控制台中未打印任何错误消息.
我打开了 Web Inspector 工具来查看 li 元素中处理的内容，但它没有 src 属性，请参阅以下内容:
<img data-ng-src="../common/images/image.png" data-src="../common/images/image.png"/> 如果我在 img 元素中添加了 src 属性，它会被加载，但是我得到一个错误，请看下面:
<img data-ng-src="{{media.thumbnailPath}}"data-src="{{media.imagePath}}"src="{{media.thumbnailPath}}"/> <!-- 控制台打印的错误信息-->GET file:///[ABS_PATH]/%7B%7Bmedia.thumbnailPath%7D%7D net::ERR_FILE_NOT_FOUND我已经阅读了许多关于类似问题的帖子和问题/答案，但没有一个对我有用.有人知道吗?
提前致谢.
解决方案
对于 IMG 标签和 AngularJS，仅使用 ng-src 属性.
{{media.imagePath}} 必须包含图像的 URL，绝对或相对.
My problem:
I want to display a list of images, stored localy, using ng-repeat directive, but the images re not being displayed.
AngularJS version: 1.2.22
The code:
<!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>
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:
<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:
<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.
解决方案
For IMG tags and AngularJS, use just the ng-src attribute.
<img ng-src="{{media.imagePath}}" />
{{media.imagePath}} must contain the URL to the image, absolute or relative.
这篇关于使用Angular JS时如何在ng-repeat内的img标签中显示图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
