fix(avatar): src is not encoded as URI (#15068)

Author: simeonoff

projects/igniteui-angular/src/lib/avatar/avatar.component.spec.ts

@@ -159,6 +159,17 @@ describe('Avatar', () => {
         expect(hostEl.getAttribute('aria-roledescription')).toEqual('image avatar');
         expect(hostEl.getAttribute('aria-label')).toEqual('avatar');
     });
+
+    it('Normalizes the value of the `src` input', () => {
+        const fixture = TestBed.createComponent(InitImageAvatarComponent);
+        fixture.detectChanges();
+
+        const instance = fixture.componentInstance.avatar;
+        instance.src = "/assets/Test - 17.jpg";
+        fixture.detectChanges();
+
+        expect(instance.src).toEqual("/assets/Test%20-%2017.jpg");
+    });
 });
 
 @Component({

projects/igniteui-angular/src/lib/avatar/avatar.component.ts

@@ -9,7 +9,7 @@ import {
     ViewChild
 } from '@angular/core';
 
-import { mkenum } from '../core/utils';
+import { mkenum, normalizeURI } from '../core/utils';
 import { IgxIconComponent } from '../icon/icon.component';
 
 let NEXT_ID = 0;
@@ -202,7 +202,13 @@ export class IgxAvatarComponent implements OnInit {
      * @igxFriendlyName Image URL
      */
     @Input()
-    public src: string;
+    public set src(value: string) {
+        this._src = normalizeURI(value);
+    }
+
+    public get src() {
+        return this._src;
+    }
 
     /** @hidden @internal */
     @ViewChild('defaultTemplate', { read: TemplateRef, static: true })
@@ -225,6 +231,7 @@ export class IgxAvatarComponent implements OnInit {
      * @internal
      */
     private _size: string | IgxAvatarSize;
+    private _src: string;
 
     /**
      * Returns the size of the avatar.

projects/igniteui-angular/src/lib/core/utils.ts

@@ -639,3 +639,11 @@ export function getComponentCssSizeVar(size: string) {
             return 'var(--ig-size, var(--ig-size-large))';
     }
 }
+
+/**
+ * @param path - The URI path to be normalized.
+ * @returns string endoded using the encodeURI function.
+ */
+ export function normalizeURI(path: string) {
+     return path.split('/').map(encodeURI).join('/');
+ }

src/app/avatar/avatar.sample.html

@@ -17,7 +17,7 @@ <h4 class="sample-title">Circular Avatars</h4>
 
             <igx-avatar src="https://images.unsplash.com/photo-1514041790697-53f1f86214d2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7ac79503fbe78855a346c8d814f95ba&auto=format&fit=crop&w=1650&q=80" size="small" shape="circle"></igx-avatar>
 
-            <igx-avatar src="assets/images/avatar/17.jpg" size="medium" shape="circle"></igx-avatar>
+            <igx-avatar src="assets/images/avatar/17 - Test.jpg" size="medium" shape="circle"></igx-avatar>
 
             <igx-avatar src="https://images.unsplash.com/photo-1506804880640-f3205deb1b8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2f8dd0c16478825034602dce63d9aaca&auto=format&fit=crop&w=1350&q=80" size="large" shape="circle"></igx-avatar>
         </article>
@@ -41,7 +41,7 @@ <h4 class="sample-title">Rounded Avatars</h4>
 
             <igx-avatar src="https://images.unsplash.com/photo-1514041790697-53f1f86214d2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7ac79503fbe78855a346c8d814f95ba&auto=format&fit=crop&w=1650&q=80" size="small" shape="rounded"></igx-avatar>
 
-            <igx-avatar src="assets/images/avatar/17.jpg" size="medium"
+            <igx-avatar src="assets/images/avatar/17 - Test.jpg" size="medium"
                 shape="rounded"></igx-avatar>
 
             <igx-avatar src="https://images.unsplash.com/photo-1506804880640-f3205deb1b8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2f8dd0c16478825034602dce63d9aaca&auto=format&fit=crop&w=1350&q=80" size="large" shape="rounded"></igx-avatar>