Trying to show a image from Angularjs controller

Question

We've decided to use Mean.io in order to get a quick MEAN stack installation, but we're finding some troubles to get things done.

I'm trying to show a picture from my header js controller. But it doesn't show up. In fact, what i see when i open the inspector is just:

<img ng-src>

This is my HTML code, located in 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>

As you may see, i've put "ng-src" and the var taken from the js controller.

This is the 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
      };
    });

  }
]);

The template var is working correctly because if i put {{image.logo}} elsewhere it prints "assets/img/logo.png".

Suggestions? What am i missing?

Thanks in advance!

While the variable may be working, is the image at that location? Try prepending the logo route with a /. — Ben Fortune
– Ben Fortune, Commented Aug 12, 2014 at 15:36
Now, although i've changed the route the image doesn't still appear. Now, the img displays this way in the inspector: <img ng-src="/system/assets/img/logo.png" src="/system/assets/img/logo.png"> — Rubén Jiménez
– Rubén Jiménez, Commented Aug 12, 2014 at 15:57
the tag displays correctly and thus it's probably the location of your image that's off. — Xinzz
– Xinzz, Commented Aug 12, 2014 at 18:00

ogulcank · Accepted Answer · 2015-03-05 08:16:43Z

2

I had the similar problem, I did the same as you have done and was getting 404 error for the PNG. When reviewed the other requests that are made, I came up with, you must pass the "package name" in the parameter logo as well.

Just as;

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

Than the logo is displayed as desired

answered Mar 5, 2015 at 8:16

ogulcank

213 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trying to show a image from Angularjs controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related