Question

我正在使用http请求从数据库获取图像路径，图像位于服务器中。

我想在img src中显示该图像。

这是代码。

  $http({
    url     : 'user_profile_exec.php',
      method: "GET",
      params: {uid: user_id}
    })
    .success(function(data) {
      $scope.fname = data.cv_fname;
      $scope.lname = data.cv_lname;
      $scope.pic = data.pic;
      alert($scope.pic);
    }
  });

它显示网络选项卡中的数据，数据也显示在警告框中。

这是正文代码。

<div id="errors" class="kari" style="display: center" ng-style="{'display':$scope.pic == ''?'none':'block'}">
<img src="./img/2.jpg" class="img-responsive " />
    {{pic}}
</div>

<div id="errors" class="kari" style="display: center" ng-style="{'display':$scope.pic != ''?'none':'block'}">
    <img src="{{pic}}" class="img-responsive " />
</div>

不幸的是2.jpg正在显示但是我期待存储在数据库中的图像路径的输出。

我也尝试过如下，但我收到错误pic未定义。

<div id="errors" class="kari" style="display: center" ng-style="{'display':pic == ''?'none':'block'}">
<img src="./img/2.jpg" class="img-responsive " />
    {{pic}}
</div>

<div id="errors" class="kari" style="display: center" ng-style="{'display':pic != ''?'none':'block'}">
    <img src="{{pic}}" class="img-responsive " />
    {{fname}}
</div>

我不确定我做错了什么。请指教。

Answer 1

使用ng-src而不是src，

<img ng-src="{{pic}}" class="img-responsive " />
  {{fname}}
</div>

Answer 2

将src更改为ng-src

<img ng-src="{{pic}}" class="img-responsive " />
  {{fname}}
</div>

还定义$ scope.pic =“”;在控制器中克服这个未定义的问题。希望这也有帮助..

Answer 3

在您的情况下，您具有相同的div元素（即使具有相同的id="errors"），但您希望在此元素内切换图像。

要实现此目的，您可以将ngSrcdirective与expressions一起使用来设置图片的src属性。例如：

function TestControler($scope, $filter) {
  $scope.pic = '';

  //testing different urls
  $scope.togglePick = function (pic){
    if (!$scope.pic){
      $scope.pic = $scope.fname = "//www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg";
    } else {
      $scope.pic = $scope.fname = '';
    }
  }

}

.testBtn {
  margin-bottom: 1em;
}

.kari {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
<div ng-controller="TestControler">

<button ng-click="togglePick()" class="testBtn">
Toggle pic
</button>


<div id="errors" class="kari">
  <img ng-src="{{pic ? pic : './img/2.jpg'}}" class="img-responsive " /> 
  {{fname ? fname : '2.jpg'}}
</div>

</div>
</div>

顺便说一句，center不是display property的有效值。

在AngularJS中动态显示图像

3 个答案: