Dylan Chensky Dylan Chensky - 4 months ago 8
AngularJS Question

NetBeans locate a file under app's root folder

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

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