[img] Add support for custom alt tag.

README.md

@@ -111,6 +111,7 @@ import Avatar, { ConfigProvider } from 'react-avatar';
 | `maxInitials` | *number*          |         | Set max nr of characters used for the initials. If maxInitials=2 and the name is Foo Bar Var the initials will be FB  |
 | `initials` | *string or function* | [defaultInitials][3] | Set the initials to show or a function that derives them from the component props, the method should have the signature `fn(name, props)` |
 | `value`       | *string*          |         | Show a value as avatar                                                                                 |
+| `alt`         | *string*          | `name` or `value` | The `alt` attribute used on the avatar `img` tag. If not set we will fallback to either `name` or `value` |
 | `color`       | *string*          | random  | Used in combination with `name` and `value`. Give the background a fixed color with a hex like for example #FF0000 |
 | `fgColor`     | *string*          | #FFF  | Used in combination with `name` and `value`. Give the text a fixed color with a hex like for example #FF0000 |
 | `size`        | *[length][1]*             | 50px      | Size of the avatar                                                                                     |

index.d.ts

@@ -38,6 +38,10 @@ export interface ReactAvatarProps {
      * Show a value as avatar
      */
     value?: string;
+    /**
+     * The alt attribute used on the avatar img tag. If not set we will fallback to either name or value
+     */
+    alt?: string;
     /**
      * Used in combination with `name` and `value`. Give the background a fixed color with a hex like for example #FF0000
      */

src/index.js

@@ -70,6 +70,7 @@ class Avatar extends PureComponent {
         // PropTypes defined on sources
         ...sourcePropTypes,
 
+        alt: PropTypes.string,
         className: PropTypes.string,
         fgColor: PropTypes.string,
         color: PropTypes.string,
@@ -242,10 +243,9 @@ class Avatar extends PureComponent {
     }
 
     _renderAsImage() {
-        const { className, round, unstyled, name, value } = this.props;
+        const { className, round, unstyled, alt, name, value } = this.props;
         const { internal } = this.state;
         const size = parseSize(this.props.size);
-        const alt = name || value;
 
         const imageStyle = unstyled ? null : {
             maxWidth: '100%',
@@ -260,7 +260,7 @@ class Avatar extends PureComponent {
                 height={size.str}
                 style={imageStyle}
                 src={this.state.src}
-                alt={alt}
+                alt={alt || name || value}
                 onError={internal && internal.fetch} />
         );
     }