Add `fallback` property to Image component and setup placeholder images

src/canvas/view/CanvasView.js

@@ -217,8 +217,8 @@ module.exports = Backbone.View.extend({
         .${ppfx}plh-image {
           background: #f5f5f5;
           border: none;
-          height: 50px;
-          width: 50px;
+          height: 100px;
+          width: 100px;
           display: block;
           outline: 3px solid #ffca6f;
           cursor: pointer;

src/dom_components/model/ComponentImage.js

@@ -1,4 +1,7 @@
-var Component = require('./Component');
+import { result } from 'underscore';
+const Component = require('./Component');
+const svgAttrs =
+  'xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 24 24" style="fill: rgba(0,0,0,0.15); transform: scale(0.75)"';
 
 module.exports = Component.extend(
   {
@@ -6,7 +9,6 @@ module.exports = Component.extend(
       ...Component.prototype.defaults,
       type: 'image',
       tagName: 'img',
-      src: '',
       void: 1,
       droppable: 0,
       editable: 1,
@@ -14,6 +16,16 @@ module.exports = Component.extend(
       resizable: { ratioDefault: 1 },
       traits: ['alt'],
 
+      src: `<svg ${svgAttrs}>
+        <path d="M8.5 13.5l2.5 3 3.5-4.5 4.5 6H5m16 1V5a2 2 0 0 0-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2z"></path>
+      </svg>`,
+
+      // Fallback image in case the src can't be loaded
+      // If you use SVG, xmlns="http://www.w3.org/2000/svg" is required
+      fallback: `<svg ${svgAttrs}>
+        <path d="M2.28 3L1 4.27l2 2V19c0 1.1.9 2 2 2h12.73l2 2L21 21.72 2.28 3m2.55 0L21 19.17V5a2 2 0 0 0-2-2H4.83M8.5 13.5l2.5 3 1-1.25L14.73 18H5l3.5-4.5z"></path>
+      </svg>`,
+
       // File to load asynchronously once the model is rendered
       file: ''
     },
@@ -68,6 +80,21 @@ module.exports = Component.extend(
       return attr;
     },
 
+    getSrcResult(opt = {}) {
+      const src = this.get(opt.fallback ? 'fallback' : 'src') || '';
+      let result = src;
+
+      if (src && src.substr(0, 4) === '<svg') {
+        result = `data:image/svg+xml;base64,${window.btoa(src)}`;
+      }
+
+      return result;
+    },
+
+    isDefaultSrc() {
+      return this.get('src') === result(this, 'defaults').src;
+    },
+
     /**
      * Parse uri
      * @param  {string} uri

src/dom_components/view/ComponentImageView.js

@@ -1,12 +1,13 @@
 import { isString } from 'underscore';
-var ComponentView = require('./ComponentView');
+const ComponentView = require('./ComponentView');
 
 module.exports = ComponentView.extend({
   tagName: 'img',
 
   events: {
     dblclick: 'onActive',
-    click: 'initResize'
+    click: 'initResize',
+    error: 'onError'
   },
 
   initialize(o) {
@@ -49,9 +50,10 @@ module.exports = ComponentView.extend({
    * */
   updateSrc() {
     const { model, classEmpty, $el } = this;
-    const src = model.get('src');
+    const src = model.getSrcResult();
+    const srcExists = src && !model.isDefaultSrc();
     model.addAttributes({ src });
-    $el[src ? 'removeClass' : 'addClass'](classEmpty);
+    $el[srcExists ? 'removeClass' : 'addClass'](classEmpty);
   },
 
   /**
@@ -77,8 +79,14 @@ module.exports = ComponentView.extend({
     }
   },
 
+  onError() {
+    const fallback = this.model.getSrcResult({ fallback: 1 });
+    if (fallback) this.el.src = fallback;
+  },
+
   render() {
     this.renderAttributes();
+    this.updateSrc();
     const { $el, model } = this;
     const cls = $el.attr('class') || '';
     !model.get('src') && $el.attr('class', `${cls} ${this.classEmpty}`.trim());