angularjs - 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.jpgand ~/img/blue.jpg，但没有任何效果。但是，当我更改image为网络链接时，它可以工作

Answer 1

在此处阅读文档。

在 src 属性中使用像 {{hash}} 这样的 Angular 标记不能正常工作：浏览器将从带有文本 {{hash}} 的 URL 获取，直到 Angular 替换 {{hash}} 中的表达式。ngSrc 指令解决了这个问题。

编写它的错误方式：

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

正确的写法：

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

Answer 2

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

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

所以控制器中的对象应该如下所示：

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

在视图中：

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