title: Loading image src using a variable containing base64 data in AngularJS
body: <h2>Loading image using variable containing <code>base64</code> data in AngularJS</h2>
  
  <p>I am trying to find the right way to load a image source from a variable containing <code>base64</code> encoded image data (for example pulled from a canvas using <code>toDataURL();</code> ).</p>
  
  <p>At first I just tried it like this:</p>
  
  <pre><code>&lt;img src="{{image.dataURL}}" /&gt;
  </code></pre>
  
  <p>where the image is a scope variable with a variable <code>dataURL</code> containing the <code>base64</code> data. This is actually working pretty well, the only problem is that I get a <code>404</code> error in my console. Something like this: </p>
  
  <blockquote>
    <p>GET <a href="http://www.example.com/%7B%7Bimage.dataURL%7D%7D" rel="noreferrer">http://www.example.com/%7B%7Bimage.dataURL%7D%7D</a> 404 (Not Found) </p>
  </blockquote>
  
  <p>Not so pretty. When I tried a more angular style solution like this: </p>
  
  <pre><code>&lt;img data-ng-src="image.dataURL" /&gt;
  </code></pre>
  
  <p>the images are not loading at all.
  I made a fiddle which you can find <kbd><a href="http://jsfiddle.net/wilt/4LJDB/3/" rel="noreferrer"><strong>HERE</strong></a></kbd></p>
  
  <p>Any suggestions how to get rid of this error in my console?</p>
  
  <hr>
  
  <h2>EDIT:</h2>
  
  <p>Gruff Bunny was right. This <code>&lt;img data-ng-src="{{image.dataURL}}" /&gt;</code> is working...</p>
  
  <p>Working solution can be found <kbd><a href="http://jsfiddle.net/wilt/4LJDB/5/" rel="noreferrer"><strong>HERE</strong></a></kbd></p>