title: How can I load an a-frame's a-image that doesn't have a 1:1 size ratio
body: <p>I am trying to learn A-frame and have been playing around with different entities. The static objects are able to load(box, cylinder, etc) but some things with a src attribute don't work.</p>
  
  <p>I have looked online and in the docs but can't find any clear help.</p>
  
  <p>I was able to get the 1:1 image load that was (512X512) in size. Though now when I try to have an image with varying widths and heights it rejects the image.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://aframe.io/releases/0.9.0/aframe.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
   &lt;a-scene&gt;
     &lt;a-assets&gt;
    &lt;img id="boxTexture" src="https://images.unsplash.com/photo-1519575706483-221027bfbb31?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;w=1000&amp;q=80"&gt;
     &lt;/a-assets&gt;
  
     &lt;a-image src="#boxTexture" position="0 1.5 -1" rotation="0 0 0" crossOrigin="anonymous"&gt;&lt;/a-image&gt;
  
     &lt;a-sky color="#222"&gt;&lt;/a-sky&gt;
   &lt;/a-scene&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I thought it was going to show me the image I linked to as it did with the 1:1 image but it just showed a black square. Looking at the console I see this error which didn't show on the 1:1 image.</p>
  
  <p>THREE.WebGLRenderer: Texture has been resized from (1000x667) to (512x512).
  s @ three.js:20075</p>
  
  <p>The other thing that stuck out to me was this warning.</p>
  
  <p>three.js:19907 THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.</p>
  
  <p>Why does it need to try and make it (512x512) and is there a way I can make is make an image of a different size.</p>