How to show image dynamycally in html(angularjs)

Question

 src={{logo}}

var logo = 'localhost:3000/modules/images/default.png'

I am displaying the image path dynamicaly but its not showing path in html, Do i need to use quotes for src?Can anyone please help me.

Answer 1

Use ng-src

<img ng-src="{{logoUrl}}">

This gives you expected result, because phone.imageUrl is evaluated and replaced by its value after angular is loaded.

<img src="{{logoUrl}}">

But with this, the browser tries to load an image named {{phone.imageUrl}}, which results in a failed request. You can check this in the console of your browser.

var app=angular.module("myApp",[]);
app.controller('myCtrl',function($scope){
  $scope.logo='https://angularjs.org/img/AngularJS-large.png';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div>
    <img ng-src="{{logo}}" />
  </div>
</div>

Answer 2

<img ng-src={{logo}}/>

$scope.logo = 'localhost:3000/modules/images/default.png'

Answer 3

simply use ng-src..

$scope.logo = 'localhost:3000/modules/images/default.png';

 <img ng-src="{{logo}}">