fall back to default image if thumb not found

This incorporates a fallback image into the thumbnail component for all of project, studio and avatar thumbnails using the `onerror` property of img elements (which is supported across all browsers).

/cc @thisandagain @rschamp

src/components/grid/grid.jsx

@@ -64,6 +64,7 @@ var Grid = React.createClass({
                                     href={href}
                                     title={item.title}
                                     src={item.image}
+                                    srcDefault={'https://uploads.scratch.mit.edu/galleries/thumbnails/default.png'}
                                     owner={item.owner}
                                 />
                             );

src/components/thumbnail/thumbnail.jsx

@@ -8,12 +8,20 @@ var Thumbnail = React.createClass({
     propTypes: {
         src: React.PropTypes.string
     },
+    getInitialState: function () {
+        return {
+            srcFallback: false,
+            avatarFallback: false
+        };
+    },
     getDefaultProps: function () {
         return {
             href: '#',
             title: 'Project',
             src: '',
+            srcDefault: 'https://uploads.scratch.mit.edu/projects/thumbnails/default.png',
             avatar: '',
+            avatarDefault: 'https://uploads.scratch.mit.edu/users/avatars/default.png',
             type: 'project',
             showLoves: false,
             showFavorites: false,
@@ -24,6 +32,12 @@ var Thumbnail = React.createClass({
             alt: ''
         };
     },
+    handleSrcError: function () {
+        this.setState({srcFallback: true});
+    },
+    handleAvatarError: function () {
+        this.setState({avatarFallback: true});
+    },
     render: function () {
         var classes = classNames(
             'thumbnail',
@@ -58,7 +72,8 @@ var Thumbnail = React.createClass({
                 <div
                     key="remixes"
                     className="thumbnail-remixes"
-                    title={this.props.remixes + ' remixes'}>
+                    title={this.props.remixes + ' remixes'}
+                >
                     {this.props.remixes}
                 </div>
             );
@@ -68,19 +83,48 @@ var Thumbnail = React.createClass({
                 <div
                     key="views"
                     className="thumbnail-views"
-                    title={this.props.views + ' views'}>
+                    title={this.props.views + ' views'}
+                >
                     {this.props.views}
                 </div>
             );
         }
-        var imgElement,titleElement,avatarElement;
+
+        var imgElement, titleElement, avatarElement;
         if (this.props.linkTitle) {
-            imgElement = <a className="thumbnail-image" href={this.props.href} key="imgElement">
+            if (this.state.srcFallback) {
-                             <img src={this.props.src} alt={this.props.alt} />
+                imgElement = (
-                         </a>;
+                    <a
-            titleElement =  <a href={this.props.href} key="titleElement">
+                        className="thumbnail-image"
-                                {this.props.title}
+                        href={this.props.href}
-                            </a>;
+                        key="imgElement"
+                    >
+                        <img
+                            alt={this.props.alt}
+                            src={this.props.srcDefault}
+                        />
+                    </a>
+                );
+            } else {
+                imgElement = (
+                    <a
+                        className="thumbnail-image"
+                        href={this.props.href}
+                        key="imgElement"
+                    >
+                        <img
+                            alt={this.props.alt}
+                            src={this.props.src}
+                            onError={this.handleSrcError}
+                        />
+                    </a>
+                );
+            }
+            titleElement = (
+                <a href={this.props.href} key="titleElement">
+                    {this.props.title}
+                </a>
+            );
         } else {
             imgElement = <img src={this.props.src} />;
             titleElement = this.props.title;
@@ -97,10 +141,32 @@ var Thumbnail = React.createClass({
         }
 
         if (this.props.avatar && this.props.showAvatar) {
-            avatarElement =
+            if (this.state.avatarFallback) {
-                <a className="creator-image" href={'/users/' + this.props.creator + '/'}>
+                avatarElement = (
-                    <img src={this.props.avatar} alt={this.props.creator} />
+                    <a
-                </a>;
+                        className="creator-image"
+                        href={'/users/' + this.props.creator + '/'}
+                    >
+                        <img
+                            alt={this.props.creator}
+                            src={this.props.avatarDefault}
+                        />
+                    </a>
+                );
+            } else {
+                avatarElement = (
+                    <a
+                        className="creator-image"
+                        href={'/users/' + this.props.creator + '/'}
+                    >
+                        <img
+                            alt={this.props.creator}
+                            src={this.props.avatar}
+                            onError={this.handleAvatarError}
+                        />
+                    </a>
+                );
+            }
         }
         return (
             <div className={classes} >