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

first : use `ng-src` ; second : try with `./img/blue.jpg` in $scope.Photo1 image property — xkeshav, Jun 29 '16 at 04:14
`./img/blue.jpg` does not work, neither does `./img/blue.jpg/` — Dylan Czenski, Jun 29 '16 at 04:23

score 1 · Answer 1 · answered Jun 29 '16 at 04:23

1

Read the documentation here.

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

The buggy way to write it:

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

The correct way to write it:

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

answered Jun 29 '16 at 04:23

Raman Sahasi

30,180
9
58
71

Thank you for your tip but `Photo1.image` still cannot locate the image – Dylan Czenski Jul 08 '16 at 17:31
@Dylan just from debug point of view, please hardcode your url to ``. Is the image showing now? – Raman Sahasi Jul 09 '16 at 14:20

score 0 · Accepted Answer · answered Jul 11 '16 at 00:41

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

NetBeans locate a file under app's root folder

2 Answers2