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，但没有效果。但是，当我将image更改为网络链接时，它可以正常工作

Answer 1

Read the documentation here.

在src属性中使用像{{hash}}这样的Angular标记并不起作用右：浏览器将使用文字文本从URL中获取 {{hash}}直到Angular替换{{hash}}中的表达式。该 ngSrc指令解决了这个问题。

写它的错误方法：

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

写它的正确方法：

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

Answer 2

找到答案。在窗口左侧的“项目”面板中，单击“文件”选项卡，将文件拖到编辑区域中，位于src=""属性的引号之间。然后img标记如下所示：

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

因此控制器中的对象应如下所示：

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

在视图中：

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

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

2 个答案: