无法使用ng-src加载单个本地 - Angularjs

时间:2014-09-19 20:14:50

标签: javascript angularjs angularjs-directive

我在尝试将单个图像绑定到模板时遇到了问题。当其他数据存在时,我通常使用中继器。但是,在这里我只需要放置一个图像而不需要放置其他数据。我在示例一中成功使用了ng-repeat来从在线调用图像。但是,本地链接会生成损坏的图像。我在这里缺少什么?

FYI。我正在使用角度种子项目,因此控制器在app.js中设置,不需要包装ng-src。

示例1 - 成功

<img ng-src="{{image}}"/>

.controller('someCtrl', ['$scope', function($scope) {
    $scope.image = 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg';
}])

示例2 - 失败

<img ng-src="../img/{{image}}"/>

.controller('someCtrl', ['$scope', function($scope) {
    $scope.image = 'cat.jpg';
}])

2 个答案:

答案 0 :(得分:0)

从语法的角度来看是正确的。我刚刚在一个正在研究的角度项目中做到这一点。确保图像位于应有的位置,并确保相对路径正确。这就是所有可能出错的地方。我不认为这是一个有角度的问题。

答案 1 :(得分:0)

它应该工作。检查你的照片是否存在。

http://jsfiddle.net/s0w6eyna/

HTML

<img ng-src="https://farm4.staticflickr.com/3261/2801924702_{{image}}" />

JS

function ImageCtrl($scope) {
    $scope.image = 'ffbdeda927_d.jpg';
}