Adding images with Angular JS

Question

Hi I am new to angular js, the app I am working on uses it. But I have stumbled into a problem... (I mainly do html/css) when adding images to the markup the regular way they dont show up:

<img src="image/source/image.png"/>

So I did the following to the controller file:

  subscriptionControllers.controller('imagesController', function($scope) {
  $scope.image = [{
    src: 'image/source/image.png',
  }];
});

then added to the html:

<img ng-src="{{image}}"/>

But still nothing is showing up.

Any help with this is greatly appreciated, thank you!

EDIT:

Yes the image exists, and the path is correct When I look at the console it shows the image as a: image.png%22%7D] /subscription/images

so it is adding %22%7D to the image I don't know why, if I click the image link in the console it takes me to a 404 page.

Edit: I no longer think this is the problem, when I look at the console and click the images tab, it displays the image as type: html/text I am not sure why it is doing this, any clue?

There should be no problem with your code in angularjs, are you sure the image exists? — caffeinated.tech
– caffeinated.tech, Commented Mar 12, 2014 at 17:26

Sai · Accepted Answer · 2014-03-12 17:44:50Z

15

I could see your image model is an array of json object. If so then please do the below changes in the view while accessing the image model.

<img ng-src="{{image[0].src}}"/>

answered Mar 12, 2014 at 17:44

Sai

2,06819 silver badges26 bronze badges

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

Comments

Jayendra Gothi · Accepted Answer · 2014-03-12 17:26:06Z

0

You might have specified wrong path in the image src. You can check whether the image is loaded, using firebug or developers tool available in every Browser.

answered Mar 12, 2014 at 17:26

Jayendra Gothi

7122 gold badges12 silver badges27 bronze badges

Comments

shaunhusain · Accepted Answer · 2014-03-12 17:35:50Z

Be sure you have defined you ng-app and ng-controller, everything looks correct, did a test example here:

http://plnkr.co/edit/JnwCyEWT3KiZcsrSg6Ro?p=preview

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="MyCtrl">
    <img src="https://www.google.com/images/srpr/logo11w.png"/>
    <img ng-src="{{image}}"/>
  </body>

</html>

JS

// Code goes here

angular.module("myApp", []).controller("MyCtrl", function($scope){
  $scope.image = "https://www.google.com/images/srpr/logo11w.png";

  })

swapnil patil · Accepted Answer · 2015-10-24 10:32:13Z

0

Use this <img src="{{image[index].src}}"/>

It seems you are using array of objects so in your case "index" is the object index which you want to show . Hope this will help you.

answered Oct 24, 2015 at 10:32

swapnil patil

313 bronze badges

1 Comment

Eli Stone Over a year ago

This will work, its just not the angular way to do it see @Sai for the best answer.

Collectives™ on Stack Overflow

Adding images with Angular JS

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related