通过 angularJs 控制器将图像路径传递给 HTML答案

【问题标题】：Passing image path via angularJs controller to HTML通过 angularJs 控制器将图像路径传递给 HTML
【发布时间】：2015-12-04 00:52:04
【问题描述】：

我正在尝试通过 ASP.NET MVC 项目中的 angularJS 控制器将图像路径传递给 HTML 页面。图像存储在项目的“contents/images”文件夹中。我收到 404（未找到）错误。我正在使用 IIS 快递。下面是代码

HTML

    <div class="carousel-inner" role="listbox" >
        <div data-ng-repeat="img in mainCtrl.images">
            <div class="item">
                <img src={{img.path}} alt={{img.name}} class="banner">
            </div>
        </div>
      </div>

角度控制器

(function () {
    'use strict';

    angular
    .module('TestApp')
    .controller('mainCtrl', mainCtrl);

    mainCtrl.$inject = ['$scope'];

    function mainCtrl($scope) {
        $scope.images = 
            [
                { path: '..\Contents\images\banner\banner1.jpg', name:'banner1', item:"item active" },
                { path: '..\Contents\images\banner\banner2.jpg', name:'banner2', item:"item"},
                { path: '..\Contents\images\banner\banner3.jpg', name:'banner3', item:"item"}
            ]

    }

})();

它正在尝试在http://testApp/Contents/images/banner/banner1.jpg寻找图像

传递图像路径的正确方法是什么，即使在我发布到 IIS 服务器后仍然可以工作

-艾伦-

【问题讨论】：

如果你使用别名 mainCtrl 为什么你设置 $scope 的值，你应该写：this.images = .....

标签： javascript html angularjs asp.net-mvc asp.net-mvc-5

【解决方案1】：

如果您将基本 url 作为路径传递，它是否有效？或者尝试更换

<img src={{img.path}} alt={{img.name}} class="banner">

与

<img ng-src="{{img.path}}" alt="{{img.name}}" class="banner">

快速编辑：抱歉，我一秒钟前还没有格式化 html。

【讨论】：