From 7a6ed2a21402b6eb2b739d5f4efb948da1cbc94c Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 26 Jan 2021 22:52:36 +0300
Subject: [PATCH] Fixed #1779 - Add imageAlt and onImageError to Avatar

---
 src/components/avatar/Avatar.d.ts |  2 ++
 src/components/avatar/Avatar.js   | 16 +++++++++++++---
 src/showcase/avatar/AvatarDoc.js  | 32 +++++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/components/avatar/Avatar.d.ts b/src/components/avatar/Avatar.d.ts
index 0d4e750e37..03ac330757 100644
--- a/src/components/avatar/Avatar.d.ts
+++ b/src/components/avatar/Avatar.d.ts
@@ -9,6 +9,8 @@ interface AvatarProps {
     style?: object;
     className?: string;
     template?: any;
+    imageAlt?: string;
+    onImageError?(event: Event): void;
 }
 
 export class Avatar extends React.Component<AvatarProps,any> {}
diff --git a/src/components/avatar/Avatar.js b/src/components/avatar/Avatar.js
index d7e996a5bc..a9ff5ed074 100644
--- a/src/components/avatar/Avatar.js
+++ b/src/components/avatar/Avatar.js
@@ -13,7 +13,9 @@ export class Avatar extends Component {
         shape: 'square',
         style: null,
         className: null,
-        template: null
+        template: null,
+        imageAlt: 'avatar',
+        onImageError: null
     }
 
     static propTypes = {
@@ -24,7 +26,9 @@ export class Avatar extends Component {
         shape: PropTypes.string,
         style: PropTypes.object,
         className: PropTypes.string,
-        template: PropTypes.any
+        template: PropTypes.any,
+        imageAlt: PropTypes.string,
+        onImageError: PropTypes.func
     };
 
     renderContent() {
@@ -36,7 +40,13 @@ export class Avatar extends Component {
             return <span className={iconClassName}></span>;
         }
         else if (this.props.image) {
-            return <img src={this.props.image} alt="avatar"></img>
+            const onError = (e) => {
+                if (this.props.onImageError) {
+                    this.props.onImageError(e);
+                }
+            };
+
+            return <img src={this.props.image} alt={this.props.imageAlt} onError={onError}></img>
         }
 
         return null;
diff --git a/src/showcase/avatar/AvatarDoc.js b/src/showcase/avatar/AvatarDoc.js
index 842f16a53a..b2b029d9d9 100644
--- a/src/showcase/avatar/AvatarDoc.js
+++ b/src/showcase/avatar/AvatarDoc.js
@@ -441,6 +441,18 @@ import { AvatarGroup } from 'primereact/avatargroup';
 								<td>square</td>
 								<td>Shape of the element, valid options are "square" and "circle".</td>
 							</tr>
+                            <tr>
+								<td>template</td>
+								<td>any</td>
+								<td>null</td>
+								<td>Template of the content.</td>
+							</tr>
+                            <tr>
+								<td>imageAlt</td>
+								<td>any</td>
+								<td>null</td>
+								<td>It specifies an alternate text for an image, if the image cannot be displayed.</td>
+							</tr>
 						</tbody>
 					</table>
 				</div>
@@ -448,6 +460,26 @@ import { AvatarGroup } from 'primereact/avatargroup';
 				<h5>Properties of AvatarGroup</h5>
 				<p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
 
+                <h5>Events</h5>
+                <div className="doc-tablewrapper">
+                    <table className="doc-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                                <th>Description</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+								<td>onImageError</td>
+								<td>event: Browser event</td>
+								<td>This event is triggered if an error occurs while loading an image file.</td>
+							</tr>
+                        </tbody>
+                    </table>
+                </div>
+
 				<h5>Styling of Avatar</h5>
 				<p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
 				<div className="doc-tablewrapper">