试图从Angularjs控制器显示图像

时间:2014-08-12 15:21:46

标签: javascript html node.js angularjs mean-stack

我们决定使用Mean.io来快速安装MEAN堆栈,但我们发现了一些麻烦来完成任务。

我试图从我的标头js控制器显示一张图片。但它并没有显现出来。事实上,我打开检查员时所看到的只是:

<img ng-src>

这是我的HTML代码,位于header.html:

<div class="page-header" data-ng-controller="HeaderController">
   <div class="logo pull-left">
       <a class="navbar-brand" ui-sref="home"><img ng-src="{{image.logo}}"/></a>
   </div>
</div>

正如您所看到的,我已经把&#34; ng-src&#34;和来自js控制器的var。

这是HeaderController:

'use strict';

angular.module('mean.system').controller('HeaderController', ['$scope', '$rootScope', 'Global', 'Menus',
  function($scope, $rootScope, Global, Menus) {
    $scope.global = Global;
    $scope.menus = {};
    $scope.image = {
      logo: 'assets/img/logo.png'
    };

    // Default hard coded menu items for main menu
    var defaultMainMenu = [];

    // Query menus added by modules. Only returns menus that user is allowed to see.
    function queryMenu(name, defaultMenu) {

      Menus.query({
        name: name,
        defaultMenu: defaultMenu
      }, function(menu) {
        $scope.menus[name] = menu;
      });
    }

    // Query server for menus and check permissions
    queryMenu('main', defaultMainMenu);

    $scope.isCollapsed = false;

    $rootScope.$on('loggedin', function() {

      queryMenu('main', defaultMainMenu);

      $scope.global = {
        authenticated: !! $rootScope.user,
        user: $rootScope.user
      };
    });

  }
]);

模板var工作正常,因为如果我将{{image.logo}}放在别处,则会打印&#34; assets / img / logo.png&#34;。

连连呢?我错过了什么?

提前致谢!

1 个答案:

答案 0 :(得分:2)

我有类似的问题,我做的和你做的一样,并且PNG收到404错误。当审查了其他要求时,我提出了, 你必须传递&#34;包名&#34;在参数徽标中也是如此。

就像;

$scope.image = {
      logo: 'system/assets/img/logo.png'
    };

根据需要显示徽标