Если в тэг <img src> вставить путь к изображению через переменную angular, например, {{imagepath}}, то в браузере картинка будет отображаться, но в консоли разработчика будет выводиться сообщение об ошибке. Для вывода изображения из AngularJS нужно использовать вместо <img src...> заменитель из AngularJS <img ng-src="{{image.url}}"/>.
Ниже пример для вывода изображения на странице:
Javascript код:
var myApp = angular.module("photoGallery", []); myApp.controller("photoList", function ($scope) { var photo = { imgpath: "/Images/DSC_1499.JPG", description: "Фото Швеции", year: "2013" }; $scope.photo = photo; $scope.message = "Who is this?" });
html-код страницы:
<div ng-controller="photoList" class="container"> <h1>{{message}}</h1 <div ng-repeat="image in images"> <h1>{{image.title}}</h1> <img ng-src="{{image.url}}" width="200" /> </div> </div>