如何在使用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标签中显示图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
AngularJS版本：1.2.22
代码：
-
目录结构：
myapp /
| --- common /
| | --- images /
| | --- image.png
|
| --- subapp1 /
| | --- index.html
| | --- subapp1.js
| |
| | ---控制器/
| | | --- SubApp1Controller.js
| |
| | --- views /
| | | --- imageListView.html -
index.html
<！DOCTYPE html>
< html lang =endata-ng-app =SubApp1>
< head>
< meta charset =utf-8/>
< / head>
< body>
< div id =pagedata-ng-view =>
< / div>
<！ - 包含所需的库，模型和控制器 - >
< script type =text / javascriptsrc =../ common / libs / angular.min.js>< / script>
< script type =text / javascriptsrc =../ common / libs / angular-route.min.js>< / script>
< script type =text / javascriptsrc =../ common / libs / angular-touch.min.js>< / script>
<！ - 控制器 - >
< script type =text / javascriptsrc =controllers / SubApp1Controller.js>< / script>
<！ - App Module（main） - >
< script type =text / javascriptsrc =subapp1.js>< / script>
< / body>
< / html>
- subapp1.js
//实例化SubApp1模块。
var subApp1 = angular.module（SubApp1，[ngRoute，ngTouch]）;
//设置控制器
subApp1.controller（SubApp1Controller，
[$ scope，SubApp1Controller]
）;
//定义模块的路由。
subApp1.config（$（routeProvider）{
$ routeProvider.when（/ home，{
controller：SubApp1Controller，
templateUrl：views / imageListView。 html
}）;
$ routeProvider.otherwise（{redirectTo：/ home}）;
}）;
- SubApp1Controller.js
function SubApp1Controller（$ scope）
{
/ **
*私有方法：_run（）
* SubApp1Controller的主要功能，其中所有魔术
*发生。
* /
函数_run（）{
//此变量将定义将在图像列表视图中加载哪种样式
$ scope.section =subapp1;
var imageSource;
imageSource =../common/images/image.png;
//在列表中显示的媒体元素列表
$ scope.mediaList = [
{
thumbnailPath：imageSource，
imagePath：imageSource ，
}，
{
thumbnailPath：imageSource，
imagePath：imageSource，
}，
{
thumbnailPath：imageSource，
imagePath：imageSource，
}，
{
thumbnailPath：imageSource，
imagePath：imageSource，
}，
{
thumbnailPath：imageSource ，
imagePath：imageSource，
}，
];
};
//运行这个类的主要方法
_run（）;
}
- imageListView.html
< div class =grid-background>< / div>
< header class =grid-header {{section}}>
< div class =button-right>< / div>
< / header>
< ul id =gridclass =grid>
< li class =grid-itemdata-ng-repeat =media in mediaList>
< / li>
< / ul>
额外信息：
图像未加载，控制台中未打印任何错误消息。
打开Web Inspector工具查看li元素中处理的内容它没有src属性，请参阅下面的内容：
< li class =grid-item ng-scopedata -ng-repeat =media in mediaList>
< img data-ng-src =../ common / images / image.pngdata-src =../ common / images / image.png/>
< / li>
如果我在img元素中添加src属性，它会被加载，但是出现错误，见下面的内容：
< li class =grid-itemdata-ng-repeat =media in mediaList>
data-src ={{media.imagePath}}
src ={{media。 thumbnailPath}}
/>
< / li>
<！ - 在控制台中打印的错误信息 - >
GET file：/// [ABS_PATH] /%7B%7Bmedia.thumbnailPath%7D%7D net :: ERR_FILE_NOT_FOUND
我已阅读了许多关于类似问题的帖子和问题/答案，但他们中没有人为我工作。有没有人有线索？
在此先感谢。 解决方案
对于IMG标签和AngularJS，只需使用 ng-src 属性。
< img ng- src ={{media.imagePath}}/>
{{media.imagePath}} 必须包含图片的网址，绝对的或相对的。
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:
Directory Structure:
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"});
});
- 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>
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屋！
查看全文
