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服务$sce功能设置受信任的不同网域trustAsResourceUrl。< / p>

<强>标记

<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}); 
};

上面的重定向可以改进使用{/ 1}}指令，如

最终加价

ui-sref

图像src未出现在视图中

1 个答案: