In this example of Ng-Src, We have an array of "pics" which contain Url and name and we are looping thro' the array using ng-repeat. Scope variable : $ = [{ url: "", Name: "John Mark" }, { url: "", Name: "Stephen Gill" }]; And html code like:

  • {{pic.Name}}
<!DOCTYPE html> <html xmlns=""> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src=""></script> <link rel="stylesheet" href=""> </head> <body ng-app="myApp" ng-controller="myController"> <div class="container"> <h3 class="text-primary">Images in list using ng-src</h3> <ul ng-repeat="pic in pics"> <li><img ng-src="{{pic.url}}" style="height:200px;width:250px" /><span style="font-size:xx-large">{{pic.Name}}</span></li> </ul> </div> <script> var app = angular.module("myApp", []); app.controller('myController', ['$scope', function ($scope) { $ = [{ url: "", Name: "John Mark" }, { url: "", Name: "Stephen Gill" }]; }]); </script> </body> </html>