fix(ui5-avatar): image URL may now contain special characters (#1828)

Author: vladitasev

packages/main/src/Avatar.hbs

@@ -1,9 +1,9 @@
 <div class="ui5-avatar-root">
 	{{#if image}}
-		<span class="ui5-avatar-img" style="background-image: url({{image}})" role="img" aria-label="{{accessibleNameText}}"></span>
+		<span class="ui5-avatar-img" style="{{styles.img}}" role="img" aria-label="{{accessibleNameText}}"></span>
 	{{else if icon}}
 		<ui5-icon class="ui5-avatar-icon" name="{{icon}}" accessible-name="{{accessibleNameText}}"></ui5-icon>
 	{{else if initials}}
 		<span class="ui5-avatar-initials">{{validInitials}}</span>
 	{{/if}}
-</div>
+</div>

packages/main/src/Avatar.js

@@ -235,6 +235,14 @@ class Avatar extends UI5Element {
 
 		return this.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
 	}
+
+	get styles() {
+		return {
+			img: {
+				"background-image": `url("${encodeURIComponent(this.image)}")`,
+			},
+		};
+	}
 }
 
 Avatar.define();

packages/main/test/pages/Avatar.html

@@ -23,6 +23,11 @@ <h3>Avatar - Basic sample</h3>
 		<ui5-avatar image="./img/John_Miller.png"></ui5-avatar>
 	</section>
 
+    <section>
+        <h3>Avatar - special characters in image path</h3>
+        <ui5-avatar image="./img/John$$$ ' (_)Miller#1.png"></ui5-avatar>
+    </section>
+
 	<section>
 		<h3>Avatar - Square [ XS, S, M, L, XL ]</h3>
 		<ui5-avatar image="./img/woman_avatar_5.png" shape="Square" size="XS"></ui5-avatar>