code: function(url, repeat) {
          this.__image = url;
          this._repeat = repeat || "no-repeat";
  
          this.img = Crafty.asset(url);
          if (!this.img) {
              this.img = new Image();
              Crafty.asset(url, this.img);
              this.img.src = url;
              var self = this;
  
              this.img.onload = function() {
                  self._setupImage(self._drawLayer);
              };
          } else {
              this._setupImage(this._drawLayer);
          }
  
          this.trigger("Invalidate");
  
          return this;
      }
docs: @
  #.image
  @comp Image
  @kind Method
  
  @trigger Invalidate - when the image is loaded
  @sign public this .image(String url[, String repeat])
  @param url - URL of the image
  @param repeat - If the image should be repeated to fill the entity.  This follows CSS syntax: (`"no-repeat", "repeat", "repeat-x", "repeat-y"`), but defaults to `no-repeat`.
  
  Draw the specified image.
  
  @note The default value of repeat is `no-repeat`, which is different than the standard CSS default
  
  If the width and height are `0` and repeat is set to `no-repeat` the width and
  height will automatically assume that of the image. This is an
  easy way to create an image without needing sprites.
  
  If set to `no-repeat` and given dimensions larger than that of the image,
  the exact appearance will depend on what renderer (WebGL, DOM, or Canvas) is used.
  
  @example
  Will default to no-repeat. Entity width and height will be set to the images width and height
  ~~~
  var ent = Crafty.e("2D, DOM, Image").image("myimage.png");
  ~~~
  Create a repeating background.
  ~~~
  var bg = Crafty.e("2D, DOM, Image")
  .attr({w: Crafty.viewport.width, h: Crafty.viewport.height})
  .image("bg.png", "repeat");
  ~~~
  
  @see Crafty.sprite