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.

For quotes:- <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption> </figure> — Suresh B
– Suresh B, Commented Dec 27, 2016 at 13:18

Naghaveer R · Accepted Answer · 2018-07-25 09:53:31Z

7

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>

edited Jul 25, 2018 at 9:53

answered Dec 27, 2016 at 12:50

Naghaveer R

2,9424 gold badges33 silver badges53 bronze badges

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

3 Comments

MMR Over a year ago

I am not getting the image displayed with the abovee code.

Naghaveer R Over a year ago

@nlr_p that was localhost URL(Accessible only from your system). I have added other URL which is accessible. Please check

Rohìt Jíndal Over a year ago

@nir_p You can check the output in the code snippet.

Akbar Taghipour · Accepted Answer · 2016-12-27 12:50:29Z

1

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

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

answered Dec 27, 2016 at 12:50

Akbar Taghipour

3348 silver badges25 bronze badges

Comments

Manikandan Velayutham · Accepted Answer · 2016-12-27 12:54:52Z

0

simply use ng-src..

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

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

answered Dec 27, 2016 at 12:54

Manikandan Velayutham

2,2281 gold badge17 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to show image dynamycally in html(angularjs)

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related