AngularJS - Display image using directive

Question

Image Constants

angular.module('app-config', []).constant('imageConstant',
    {
        logoPath: 'assets/img/logo/',
        faviconPath: 'assets/img/favicon/',
        layoutPath: 'assets/img/layout/',
        logoFileName: 'myLogo.png'
    });

Directive

myApp.directive("streamingLogo", function () {

    var linker = function (scope, element, attrs) {

    //pass image constants here to append image url
    //for ex: src = imageConstant.logoPath + imageConstant.logoFileName;

    };
    return {
        restrict: "A",
        link: linker
    };
});

HTML

<img class="my-logo" id="my-logo" ng-src="{{src}}" streamingLogo/>

I have configured image url and file names in a constant file. How do I pass it in a directive to append image path and name dynamically so that the it gets displayed using above directive ?

The idea is to have a configuration file for image path and names so that in HTML, only ng-src="{{src}}" is passed instead of full absolute path.

illeb · Accepted Answer · 2016-10-06 07:15:06Z

1

Add imageConstant dependency to your directive and you are good to go, like this:

myApp.directive("streamingLogo", ['imageConstant', function(imageConstant) {
   var linker = function (scope, element, attrs) {

       scope.logoPath = imageConstant.logoPath; 
       scope.favIconPath = imageConstant.faviconPath;
       scope.layoutPath = imageConstant.layoutPath;
       scope.logoFileName = imageConstant.logoFileName;

   };
   return {
       restrict: "A",
       link: linker
   };
}]);

answered Oct 6, 2016 at 7:15

illeb

2,9471 gold badge23 silver badges35 bronze badges

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

1 Comment

Ravi Teja Over a year ago

@Slimshadddyyy That's because AngularJS add src attribute to the img tag because HTML only understands src attribute on a img tag not ng-src(it a AngularJS specific)

Ravi Teja · Accepted Answer · 2016-10-06 07:30:53Z

1

Inject imageConstant to your directive and add app-config as module dependency.

myApp.directive("streamingLogo", function (imageConstant) {

    var linker = function (scope, element, attrs) {
      scope.src= imageConstant.logoPath;
    };
    return {
        restrict: "A",
        link: linker
    };
});

then in linker function

Then in HTML

<img class="my-logo" id="my-logo" ng-src="{{src}}" streaming-logo/>

Note

Change streamingLogo to streaming-logo on HTML

edited Oct 6, 2016 at 7:30

answered Oct 6, 2016 at 7:17

Ravi Teja

1,1058 silver badges13 bronze badges

Comments

nikjohn · Accepted Answer · 2016-10-06 07:15:09Z

0

You can inject your constant like any other angular provider:

myApp.directive("streamingLogo", ['imageConstant', function (imageConstant) {

var linker = function (scope, element, attrs) {

console.log(imageConstant.logoPath);
console.log(imageConstant.faviconPath);
console.log(imageConstant.layoutPath);
};
return {
    restrict: "A",
    link: linker
};
}]);

answered Oct 6, 2016 at 7:15

nikjohn

22.1k16 gold badges58 silver badges88 bronze badges

Comments

Ahmad Abu Saa · Accepted Answer · 2016-10-06 07:29:02Z

you have to inject constants as dependency for your directive

myApp.directive("streamingLogo", function (imageConstant) {

     var linker = function (scope, element, attrs) {


    };
    return {
        restrict: "A",
        link: linker
    };
});

notice that you need to inject your dependencies in other ways (check this) if you want to minifey your javascript files for production.

myApp.directive("streamingLogo", ['imageConstant',function (imageConstant) {

     var linker = function (scope, element, attrs) {



    };
    return {
        restrict: "A",
        link: linker
    };
}]);

Rohìt Jíndal · Accepted Answer · 2016-10-06 21:33:04Z

You need to inject the imageConstant into the .directive function.

var myApp = angular.module('app-config', []);

myApp.directive("streamingLogo", ['imageConstant', function(imageConstant) {
   return {
       restrict: "A",
       link: function (scope, elem, attrs) {
         scope.logoPath = imageConstant.logoPath; 
         scope.favIconPath = imageConstant.faviconPath;
         scope.layoutPath = imageConstant.layoutPath;
         scope.logoFileName = imageConstant.logoFileName;
       }
   };
}]);

small change in Html code :

use streaming-logo instead of streamingLogo.

<img class="my-logo" id="my-logo" src="{{logoPath}}" streaming-logo/>

Collectives™ on Stack Overflow

AngularJS - Display image using directive

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Related