Show image dynamically in AngularJS

Issue

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

I want to show that image in img src.

Here is the code:

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

Here is the body code:

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

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

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>

What am I doing wrong?

Solution

use ng-src instead of src,

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

Answered By – Sajeetharan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0