Рис.1. Установка AngularJS через Nuget Packages

Если в тэг <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>