0

I'm trying to display an image that is base64 encoded (the html is an AngularJS directive template):

<div id="iframe" ng-hide="loading"></div>
<img ng-show="loading" id="tweetLoader" src="data:image/gif;base64,R0lGODlhIAAgAPYAAP///wAAAP...AAAAAA==" >
<div class="error" ng-show="errorMessage">{{errorMessage}}</div>

I removed part of the base64 code since it's very long, if it's absolutely needed, I'll add it.
Chrome (in firefox this doesn't happen) shows me the following error:

XMLHttpRequest cannot load image/gif;base64,R0lGODlhIAAgAPYAAP///wAAAP...AAAAAA==. Cross origin requests are only supported for HTTP.

Also, this error isn't showed every time.. It seems pretty random.

I'm using AngularJS 1.2.21

Is it a chrome bug or something?

Thanks.

Ephi Gabay
  • 938
  • 7
  • 27
  • possible duplicate of [Embedding Base64 Images](http://stackoverflow.com/questions/1207190/embedding-base64-images) – V31 Jul 28 '14 at 08:37
  • I disagree.. I'm not looking for a workaround, I'm trying to understand why this is happening, since base64 images are working on chrome. – Ephi Gabay Jul 28 '14 at 09:50

2 Answers2

1

I don't flag as duplicate cause it's not the same question but I think the answer could help you chrome.webRequest cross-origin disallowed scheme on redirect to data::

Your requests failed because data:-URI access through XMLHttpRequest was not supported until Chrome 39. (Starting in Chrome 39, you will be able to fetch data:-URIs using XMLHttpRequest, see http://crbug.com/308768 for more info).

Community
  • 1
  • 1
Heaven42
  • 329
  • 1
  • 13
  • But i'm not trying to fetch the image using `XMLHttpRequest`, I put the base64 in the src attribute of the img tag. Maybe angularJS does it by itself? – Ephi Gabay Jul 28 '14 at 09:42
0

If you are working in chrome security restrictions that prevent it from loading images from a url so just add this property and it will be working fine

img.crossOrigin = " ";

It will be fine for chrome alse

  • `crossOrigin` only works if the server replies with CORS headers. In the case of `data:`-URIs, there is no server. – Rob W Jul 28 '14 at 08:41