【问题标题】:Trying to show a image from Angularjs controller试图显示来自 Angularjs 控制器的图像
【发布时间】:2014-10-05 18:00:14
【问题描述】:

我们决定使用 Mean.io 来快速安装 MEAN 堆栈,但我们发现在完成工作时遇到了一些麻烦。

我正在尝试显示来自我的标头 js 控制器的图片。但它没有出现。其实我打开inspector看到的只是:

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

如您所见,我已将“ng-src”和从 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}} 放在其他地方,它会打印“assets/img/logo.png”。

建议?我错过了什么?

提前致谢!

【问题讨论】:

  • 虽然变量可能正在工作,但图像是否在该位置?尝试在徽标路由前添加 /
  • 现在,虽然我改变了路线,但图像仍然没有出现。现在,img 在检查器中以这种方式显示:
  • 标签显示正确,因此它可能是您的图像的位置关闭。

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


【解决方案1】:

我遇到了类似的问题,我做了和你做的一样的事情,并且得到了 PNG 的 404 错误。当审查提出的其他要求时,我想出了, 您还必须在参数 logo 中传递“包名称”。

就像;

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

比标志显示为所需

【讨论】:

    猜你喜欢
    • 2017-06-07
    • 1970-01-01
    • 2015-08-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-16
    相关资源
    最近更新 更多