NetBeans locate a file under app's root folder

Question

In my project called App, I have a controller, which contains a complex object that has a field referencing App/img/blue.jpg:

myApp.controller("myController",function($scope){
   $scope.message = "Home Page"; 
   $scope.Photo1 = {
       name: "blue_bird",
       image:"/img/blue.jpg"
   };
});

However the image is not loading when I do this:

 <img src="{{Photo1.image}}" />

I also tried changing the image field to img/blue.jpg and ~/img/blue.jpg, none works. When I change image to a web link, though, it works

Answer 1

Found the answer. In the Projects panel on the left hand side of the window, click the Files tab, drag the file into the editing area, right between the quotation marks of the src="" attribute. The img tag then looks like this:

<img src="../img/blue.jpg" alt="" />

So the object in the controller should look like:

$scope.Photo1 = {
       name: "blue_bird",
       image:"../img/blue.jpg"
   };

And in View:

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