NetBeans 在应用程序的根文件夹下找到一个文件

Question

在我名为 App 的项目中，我有一个控制器，其中包含一个复杂对象，该对象的字段引用 App/img/blue.jpg:

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

但是当我这样做时图像没有加载：

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

我还尝试将 image 字段更改为 img/blue.jpg 和 ~/img/blue.jpg，none 有效。但是，当我将 image 更改为网络 link 时，它起作用了

Answer 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.

错误的写法：

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

正确的写法：

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

Answer 2

找到答案了。在 window 左侧的“项目”面板中，单击“文件”选项卡，将文件拖到编辑区域，就在 src="" 属性的引号之间。 img 标签看起来像这样：

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

所以控制器中的对象应该是这样的：

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

并且在视图中：

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

NetBeans 在应用程序的根文件夹下找到一个文件

NetBeans locate a file under app's root folder

netbeans

file-location

angularjs