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 ? { : - {supporter.name || supporter.slug} } + src={ supporter.avatar || SmallIcon } + alt={ supporter.name || supporter.slug ? `${supporter.name || supporter.slug}'s avatar` : 'avatar' } + onError={ this._handleImgError } />} { rank === 'backer' ?
: null } )) @@ -118,4 +119,14 @@ export default class Support extends React.Component { ); } + + /** + * Handle images that aren't found + * + * @param {object} e - React synthetic event + */ + _handleImgError(e) { + const imgNode = e.target; + imgNode.src = SmallIcon; + } }