CODEWITHSUNDEEP
angularjs
Roxx
Roxx

Reputation: 3986

Show image dynamically in AngularJS

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?

Upvotes: 2

Views: 7047

Answers (3)

Stanislav Kvitash
Stanislav Kvitash

Reputation: 4622

In your case you have the same div element (even with same id="errors"), but you want to toggle image inside this element.

To achieve this you can use ngSrcdirective together with expressions to set the src attribute of your image. Example:

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>

BTW, center is not a valid value for the display property.

Upvotes: 1

biswajit-rout
biswajit-rout

Reputation: 377

Change src to ng-src 

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

Also define $scope.pic=""; in the controller to overcome this undefined issue. Hope this will also help..

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222582

use ng-src instead of src,

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

Upvotes: 5

Related Questions