From 3d096cb87f8c10798ad796ce9cf3cc39591424a8 Mon Sep 17 00:00:00 2001
From: Seonghoon Baek <lallaworld1st@gmail.com>
Date: Fri, 23 Feb 2018 22:03:40 +0900
Subject: [PATCH] fix(support): default broken/missing images to webpack icon
 (#1846)

---
 src/components/Support/Support.jsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/Support/Support.jsx b/src/components/Support/Support.jsx
index 0d59c282fc1d..95d295db6425 100644
--- a/src/components/Support/Support.jsx
+++ b/src/components/Support/Support.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Backers from './support-backers.json';
 import Additional from './support-additional.js';
+import SmallIcon from '../../assets/icon-square-small-slack.png';
 import './Support.scss';
 
 const SUPPORTERS = [ ...Backers ];
@@ -100,11 +101,11 @@ export default class Support extends React.Component {
                title={ `$${formatMoney(supporter.totalDonations / 100)} by ${supporter.name || supporter.slug}` }
                target="_blank"
                href={ supporter.website || `https://opencollective.com/${supporter.slug}` }>
-              { supporter.avatar ? <img
+              {<img
                 className={ `support__${rank}-avatar` }
-                src={ supporter.avatar }
-                alt={ supporter.name || supporter.slug ? `${supporter.name || supporter.slug}'s avatar` : 'avatar' } /> :
-                <span className={ `support__${rank}-avatar` }>{supporter.name || supporter.slug}</span> }
+                src={ supporter.avatar || SmallIcon }
+                alt={ supporter.name || supporter.slug ? `${supporter.name || supporter.slug}'s avatar` : 'avatar' } 
+                onError={ this._handleImgError } />}
               { rank === 'backer' ? <figure className="support__outline" /> : null }
             </a>
           ))
@@ -118,4 +119,14 @@ export default class Support extends React.Component {
       </div>
     );
   }
+  
+  /**
+   * Handle images that aren't found
+   *
+   * @param {object} e - React synthetic event
+   */
+  _handleImgError(e) {
+    const imgNode = e.target;
+    imgNode.src = SmallIcon;
+  }
 }