title: In a Chrome App using AngularJS, can I use the ngSrc directive directly for internal images?
body: <p>I'm writing a Chrome App using AngularJS. I know that when accessing external images you have to do a cross-origin XMLHttpRequest and serve them as blobs.</p>
  
  <p>I have a bunch of internal images (local app resources) that follow a pattern that I want to display in an ngRepeat.</p>
  
  <p>I can get the images to load statically just fine with something like:</p>
  
  <pre><code>&lt;img src="images/image1.png"/&gt;
  </code></pre>
  
  <p>But when I try using them in a repeat like this:</p>
  
  <pre><code>&lt;div ng-repeat="item in myList"&gt;
      &lt;img ng-src="{{item.imageUrl}}"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I get an error for each image (though the image from the error does exist) like this:</p>
  
  <pre><code>Refused to load the image 'unsafe:chrome-extension://hcdb...flhk/images/image1.png' because it violates the following Content Security Policy directive: "img-src 'self' data: chrome-extension-resource:".
  </code></pre>
  
  <p>I have been able to load external resources successfully using ng-src and XHR.  Do I have to follow the same pattern for internal resources loaded dynamically?</p>
  
  <h3>Update - Another Simple Example</h3>
  
  <p>Starting with the simplest Chrome App (<a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/hello-world" rel="noreferrer">https://github.com/GoogleChrome/chrome-app-samples/tree/master/hello-world</a>), the following will work outside a chrome app (in the browser) but not within the chrome app:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app ng-csp&gt;
  &lt;head&gt;
      &lt;title&gt;Hello World&lt;/title&gt;
      &lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/test.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="Ctrl"&gt;
      &lt;img ng-src="{{imageUrl}}"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>test.js</strong></p>
  
  <pre><code>function Ctrl($scope) {
      $scope.imageUrl = 'hello_world.png';
  }
  </code></pre>