图像src未出现在视图中

Question

构建一个简单的离子应用程序,连接到我也建立的API.我将一些数据传递到视图,所有数据都出现在图像的src属性中.如果我在控制器中记录了控制器中的数据,那么src就在那里,但它没有出现在视图中 - 它来自0,如:

<img ng-src="0" src="0">

我在我的控制器中传递它,如:

.controller('VenuesController', ['$state','$scope','$http','Venue', function($state,$scope,$http,Venue){
    $scope.venues = Venue.query();
    $scope.showVenue = function(id){
        $state.go('venues/:id',{id:id});
    };
}])

并在视图模板本身:

<ion-view view-title="Venues">
    <div class="list">
        <a ng-repeat="venue in venues" ng-click="showVenue({{venue.id}})" class="item item-thumbnail-left">
          <img ng-src="{{ venue.image-small }}">
          <h2>{{ venue.name }}</h2>
          <p>{{ venue.description }}</p>
        </a>
    </div>
</ion-view>

图像路径是一个完整的外部链接http://lorempixel.com/100/100/?51467,不确定我是否在这里遗漏了什么？

Answer 1

venu.image-small变量有-失败的变量声明语法,如变量不应该-,变量不应该启动各种数字等.

由于你的属性中image-small包含一个连字符(-),你应该在那里使用数组注释来获得值 venue['image-small']

标记

<img ng-src="{{ venue['image-small']}}">

更新

好像您的img源URL与您当前的域不同,您需要URL首先使用$sce服务trustAsResourceUrl功能设置不同的域.

标记

<img ng-src="{{ trustSrc(venue['image-small'])}}">

码

$scope.trustSrc = function(src) {
   return $sce.trustAsResourceUrl(src);
}

此外,您的ng-click不应使用{{}}插值指令

ng-click="showVenue(venue.id)"

然后你的函数应该改变它的实现

$scope.showVenue = function(id){
    //removed `venues/:id` and should be replace by its stateName
    $state.go('stateName',{id:id}); 
};

上面的重定向事情可以改进使用ui-sref指令

最终加价

<a ng-repeat="venue in venues" ui-sref="stateName({id:id})" class="item item-thumbnail-left">
    <img ng-src="{{ trustSrc(venue['image-small'])}}">
    <h2>{{ venue.name }}</h2>
    <p>{{ venue.description }}</p>
</a>