1

I am working on a Firefox add-on that uses AngularJS. The issue is with 'ng-src'. It does not load the referenced image. When I switch to 'src' the image loads fine.

Example.html and 'icon-32.png' are within same folder.

Appreciate your help in making sense of this issue.

Below are the code snippets.

Example.html

<html ng-app="MyAddon" ng-csp>
    <head>
    </head>
    <body ng-controller="MainCtrl" dir="{{dirr}}">
        <div border="0">
            <img ng-src="{{logo}}" width="32" align="center">
            <input id="textbox" type="text"> </input>
            <button id="textboxbutton" type="button"> {{ButtonText}}</button>
        </div>

    <script src="lib/angular.min.js"></script>
    <script src="scripts/app.js"></script>
    </body>
</html>

app.js:

function MainController($scope) {
    $scope.ButtonText= 'Hit me!';
    $scope.dirr = 'rtl';
    $scope.logo= 'icon-32.png';
};

var MyModule = angular.module('MyAddon', [])
.controller('MainCtrl', MainController)
Makyen
  • 31,849
  • 12
  • 86
  • 121
Nandu
  • 808
  • 7
  • 10
  • Can you make an xpi out of your addon and then upload to github and share with me. I have some angular experience and can help but need to replicate issue. – Noitidart Aug 06 '15 at 19:14
  • 1
    Thanks for response. I could not get the file uploaded to github. I have uploaded to: http://www.megafileupload.com/97dL/jid1-SerTv5IR3fjj3Q@jetpack-0.1.xpi – Nandu Aug 07 '15 at 02:26
  • Is there any way you can get that your source code on a public repository site (maybe not github but something like github?). Im cautious of downloading files. – Noitidart Aug 08 '15 at 17:58
  • 1
    the link to code on git: https://github.com/nkanand/FFAddon.git. Thanks and appreciate your help – Nandu Aug 08 '15 at 21:41
  • Hey nandu you inspired me to get back to using anuglar for some very easy gui's i did that: http://stackoverflow.com/questions/32087180/custom-directive-blocked?noredirect=1#comment52071207_32087180 had an issue and got it fixed, thanks for your inspiration!! :D Its helping me get out an addon Ive been delaying for awhile due to the GUI headache, angular takes care of it all for me! Heres my github repo: https://github.com/Noitidart/MailtoWebmails/blob/master/resources/scripts/app.js#L142-L148 – Noitidart Aug 19 '15 at 07:08

1 Answers1

0

It is because angular keeps adding unsafe: to your image url. I think this is the solution, please try: Angular changes urls to "unsafe:" in extension page

and whitelist the resource:// urls. without unsafe: it works.

I saw this from using DOM Inspector:

Community
  • 1
  • 1
Noitidart
  • 35,443
  • 37
  • 154
  • 323
  • 1
    Thank you very much. It works now. I had to use imgSrcSanitizationWhitelist(/^\s*(filesystem:resource|resource):/); . Could you tell me how you got DOM inspector options for Add-ons? – Nandu Aug 08 '15 at 22:35
  • Wow thanks for that share, I thought just doing a simple `/^\s*resource:/)` would fix it, how did you figure out you had to use `filesystem:resource`? Get the [addon Element Inspector](https://addons.mozilla.org/en-US/firefox/addon/element-inspector/) then shift+right click whatever you want to inspect. :) Can you update your github with the working code im interested to see :) – Noitidart Aug 08 '15 at 22:41
  • 1
    since the image was local i had to use imgSrcSanitizationWhiltelist and reference local dir. I have updated the source in github. Thanks again for your help. – Nandu Aug 11 '15 at 15:04