Fixed #1779 - Add imageAlt and onImageError to Avatar

primefaces · Jan 26, 2021 · 7a6ed2a · 7a6ed2a
1 parent b5de8d2
commit 7a6ed2a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 3 deletions.
diff --git 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
@@ -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
@@ -441,13 +441,45 @@ 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>
 
 				<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">