Merge pull request #2671 from tugcekucukoglu/avatar-error

Fixed #2670 - Avatar | New error event

api-generator/components/avatar.js

@@ -31,10 +31,18 @@ const AvatarProps = [
     } 
 ];
 
+const AvatarEvents = [
+    {
+        name: "error",
+        description: "Triggered when an error occurs while loading an image file."
+    }
+];
+
 module.exports = {
     avatar: {
         name: "Avatar",
         description: "Avatar represents people using icons, labels and images.",
-        props: AvatarProps
+        props: AvatarProps,
+        events: AvatarEvents
     }
 };

src/components/avatar/Avatar.d.ts

@@ -40,6 +40,10 @@ export interface AvatarSlots {
 }
 
 export declare type AvatarEmits = {
+    /**
+     * Triggered when an error occurs while loading an image file.
+     */
+    error: () => void;
 }
 
 declare class Avatar extends ClassComponent<AvatarProps, AvatarSlots, AvatarEmits> { }

src/components/avatar/Avatar.vue

@@ -3,7 +3,7 @@
         <slot>
             <span class="p-avatar-text" v-if="label">{{label}}</span>
             <span :class="iconClass" v-else-if="icon"></span>
-            <img :src="image" v-else-if="image">
+            <img :src="image" v-else-if="image" @error="onError">
         </slot>
     </div>
 </template>
@@ -33,6 +33,11 @@ export default {
             default: "square"
         }
     },
+    methods: {
+        onError() {
+            this.$emit('error');
+        }
+    },
     computed: {
         containerClass() {
             return ['p-avatar p-component', {

src/views/avatar/AvatarDoc.vue

@@ -40,6 +40,7 @@ import AvatarGroup from 'primevue/avatargroup';
 	<Avatar image="user.png" />
 	<Avatar label="+2" />
 </AvatarGroup>
+
 </code></pre>
 
 		<h5>Shape</h5>
@@ -60,7 +61,7 @@ import AvatarGroup from 'primevue/avatargroup';
 		<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
 <pre v-code><code>
 &lt;Avatar&gt;
-   Content
+    Content
 &lt;/Avatar&gt;
 
 </code></pre>
@@ -115,6 +116,26 @@ import AvatarGroup from 'primevue/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 class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>error</td>
+                        <td>-</td>
+                        <td>Triggered when 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 <router-link to="/theming">theming</router-link> page.</p>
 		<div class="doc-tablewrapper">
@@ -236,7 +257,7 @@ export default {
             </div>
         </div>
 
-         <div class="col-12 md:col-4">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Icon - Badge</h5>
                 <Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
@@ -268,12 +289,12 @@ export default {
             </div>
         </div>
 
-    	 <div class="col-12 md:col-4">
+        <div class="col-12 md:col-4">
-    	    <div class="card">
+            <div class="card">
-    	        <h5>Image - Badge</h5>
+                <h5>Image - Badge</h5>
-    	        <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
-    	    </div>
+            </div>
-    	</div>
+        </div>
     </div>
 </template>
 
@@ -333,7 +354,7 @@ export default {
             </div>
         </div>
 
-         <div class="col-12 md:col-4">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Icon - Badge</h5>
                 <Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>