Show image dynamically in AngularJS

Question

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?

Sajeetharan · Accepted Answer · 2017-06-12 18:03:41Z

5

use ng-src instead of src,

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

answered Jun 12, 2017 at 18:03

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Roxx Over a year ago

thanks for your answer but i am not sure what to use here ng-style="{'display':$scope.pic == ''?'none':'block'} or ng-style="{'display':pic == ''?'none':'block'} which one i should use? voted up.

Sajeetharan Over a year ago

ng-style="{'display':pic == ''?'none':'block'}

Stanislav Kvitash Over a year ago

@CalculatingMachine Just to show/hide your elements you can use ngShow/ngHide/ngIf directives.

biswajit-rout Over a year ago

<img src="./img/2.jpg" - make sure this src must get actuall path.

Roxx Over a year ago

@StanislavKvitash well i am not sure i can use ngShow/ngHide in this case or not as i have to make sure data is there or not. Let me give it a try.

|

biswajit-rout · Accepted Answer · 2017-06-12 18:07:15Z

2

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

answered Jun 12, 2017 at 18:07

biswajit-rout

3772 silver badges11 bronze badges

2 Comments

Roxx Over a year ago

controller is defined in the begining of body tag. if i want to show fname or lname then it is showing but only facing issue with pic.

Roxx Over a year ago

thanks for your answer. Well both answers are correct. i used ng-if and later i will explore ng-show/hide. searching SO. voted up.

Stanislav Kvitash · Accepted Answer · 2017-06-12 19:08:13Z

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.

Collectives™ on Stack Overflow

Show image dynamically in AngularJS

3 Answers 3

8 Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

1 Comment

Linked

Related