notrev notrev - 1 year ago 84
Javascript Question

How to show images in img tag inside an ng-repeat while using Angular JS?

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:

    |--- 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">
<meta charset="utf-8" />

<div id="page" data-ng-view="">

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

  • subapp1.js

// Instantiate the SubApp1 Module.
var subApp1 = angular.module("SubApp1", ["ngRoute", "ngTouch"]);

// Setting Controllers
["$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

  • imageListView.html

<div class="grid-background"></div>

<header class="grid-header {{section}}">
<div class="button-right"></div>

<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}}"/>

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

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

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

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download