Fixed SVG images sometimes loading with a size of 0,0 GH-20

client/src/model/presentation/components/Image.coffee

@@ -29,6 +29,9 @@ define(["./Component"],
 			@cachedImage.src = @get("src")
 			console.log @get("src")
 
+		toBase64: () ->
+
+
 		constructor: `function ImageModel() {
 			Component.prototype.constructor.apply(this, arguments);
 		}`

client/src/ui/editor/components/ImageView.coffee

@@ -22,16 +22,12 @@ define(["./ComponentView"],
 			if @model.get("imageType") is "SVG"
 				@scale = svgScale
 
-		render: () ->
-			ComponentView.prototype.render.call(@)
-			$img = $("<img src=#{@model.get('src')}></img>")
-
+		_finishRender: ($img) ->
 			if @model.get("imageType") is "SVG"
 				$img.css(
 					width: "100%"
 					height: "100%"
 				)
-				# TODO: don't we need to wait for the onload callback before we grab these values..??
 				naturalWidth = $img[0].naturalWidth
 				naturalHeight = $img[0].naturalHeight
 
@@ -42,18 +38,27 @@ define(["./ComponentView"],
 						height: scale.height
 					)
 				else
+					width = Math.max(naturalWidth, 50);
+					height = Math.max(naturalHeight, 50);
 					@$el.css(
-						width: Math.max(naturalWidth, 50)
-						height: Math.max(naturalHeight, 50)
+						width: width
+						height: height
 					)
-					@model.set("scale", {width: naturalWidth, height: naturalHeight})
+					@model.set("scale", {width: width, height: height})
 
 			$img.bind("dragstart", (e) -> e.preventDefault(); false)
 			@$el.find(".content").append($img);
 			@$el.css({
 				top: @model.get("y")
 				left: @model.get("x")
 			})
+
+		render: () ->
+			ComponentView.prototype.render.call(@)
+			$img = $("<img src=#{@model.get('src')}></img>")
+			$img.load(=> @_finishRender($img))
+			$img.error(=> @remove())
+
 			@$el
 	)
 )