fix(avatar): add alt prop for img alternate text

xidedix · xidedix · commit 78c870a54ed6 · 2024-05-27T14:47:51.000+02:00
diff --git a/projects/coreui-angular/src/lib/avatar/avatar.component.html b/projects/coreui-angular/src/lib/avatar/avatar.component.html
@@ -7,7 +7,7 @@
 
 <ng-template #defaultImageTemplate>
   @if (!!src) {
-    <img [src]="src" class="avatar-img" />
+    <img [ngSrc]="src" fill class="avatar-img" alt="{{alt}}" />
   } @else {
     <ng-content />
   }
diff --git a/projects/coreui-angular/src/lib/avatar/avatar.component.ts b/projects/coreui-angular/src/lib/avatar/avatar.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
 
 import { Colors, Shapes, Sizes, TextColors } from '../coreui.types';
 import { TextColorDirective } from '../utilities';
@@ -8,35 +8,45 @@ import { TextColorDirective } from '../utilities';
   selector: 'c-avatar',
   templateUrl: './avatar.component.html',
   standalone: true,
-  imports: [
-    NgTemplateOutlet,
-    NgClass
-  ],
-  hostDirectives: [{
-    directive: TextColorDirective, inputs: ['cTextColor: textColor']
-  }]
+  imports: [NgTemplateOutlet, NgClass, NgOptimizedImage],
+  hostDirectives: [
+    {
+      directive: TextColorDirective,
+      inputs: ['cTextColor: textColor']
+    }
+  ]
 })
 export class AvatarComponent {
   /**
    * Sets the background color context of the component to one of CoreUI’s themed colors.
    * @type Colors
    */
   @Input() color?: Colors;
+
   /**
    * Select the shape of the component.
    * @type Shapes
    */
   @Input() shape?: Shapes;
+
   /**
    * Size the component small, large, or extra large.
    * @default 'md'
    */
   @Input() size?: Omit<Sizes, 'xxl'> = 'md';
+
+  /**
+   * The alt attribute for the img element alternate text.
+   * @type string
+   */
+  @Input() alt: string = '';
+
   /**
    * The src attribute for the img element.
    * @type string
    */
   @Input() src?: string;
+
   /**
    * Sets the color context of the status indicator to one of CoreUI’s themed colors.
    * @type Colors
@@ -50,8 +60,6 @@ export class AvatarComponent {
    */
   @Input() textColor?: TextColors;
 
-  constructor() { }
-
   get statusClass(): any {
     return {
       'avatar-status': true,

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`
`8`	`8`	`<ng-template #defaultImageTemplate>`
`9`	`9`	`@if (!!src) {`
`10`		`- <img [src]="src" class="avatar-img" />`
	`10`	`+ <img [ngSrc]="src" fill class="avatar-img" alt="{{alt}}" />`
`11`	`11`	`} @else {`
`12`	`12`	`<ng-content />`
`13`	`13`	`}`