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?

Answer 1

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}}"/>