在AngularJS中动态显示图像 [英] Show image dynamically in AngularJS

问题描述

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

I am using http request to get the path of image from database and images are located in the server.

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

I want to show that image in 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);
    }
  });

它在网络"选项卡中显示数据，在警报框中显示数据.

It is showing the data in network tab also data is showing in alert box.

这是正文代码:

<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，但是我希望输出的图像路径存储在数据库中.

Unfortunately 2.jpg is showing, however I am expecting the output of image path that is stored in database.

我也尝试过以下操作，但是我收到错误 pic 未定义.

I also tried like below, but I am getting error pic is not defined.

<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>

我在做什么错了?

推荐答案

使用ng-src代替src，

use ng-src instead of src,

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

这篇关于在AngularJS中动态显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！