diff --git a/src/js/views/right_panel_view.js b/src/js/views/right_panel_view.js
index 35558b4f2..523bf13a0 100644
--- a/src/js/views/right_panel_view.js
+++ b/src/js/views/right_panel_view.js
@@ -1043,9 +1043,14 @@
                 var frame_h = this.full_size / wh;
             }
             this.models.forEach(function(m){
-                var src = m.get_img_src();
+                var img_id = "image_" + Math.random();
+                // src is async, so we set an id instead. When src returns we
+                // use the ID to find the element and set the src.
+                m.get_img_src().then(src => {
+                    document.getElementById(img_id).src = src;
+                });
                 var img_css = m.get_vp_img_css(m.get('zoom'), frame_w, frame_h);
-                img_css.src = src;
+                img_css.id = img_id;
                 // if a 'reasonable' dpi is set, we don't pixelate
                 var dpiSet = m.get('min_export_dpi') > 100;
                 img_css.pixelated = !dpiSet;
diff --git a/src/templates/viewport_inner.template.html b/src/templates/viewport_inner.template.html
index 30f50ad42..00c69d6c7 100644
--- a/src/templates/viewport_inner.template.html
+++ b/src/templates/viewport_inner.template.html
@@ -1,6 +1,7 @@
 
     <% _.each(imgs_css, function(css, i) { %>
-    <img class="vp_img<% if (css.pixelated) {%> pixelated<% } %>"
+    <img id='<%= css.id %>'
+        class="vp_img<% if (css.pixelated) {%> pixelated<% } %>"
         style="opacity:<%= opacity %>; left:<%= css.left %>px; top:<%= css.top %>px;
             width:<%= css.width %>px; height:<%= css.height %>px;
             -webkit-transform-origin:<%= css['transform-origin'] %>;