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

SAP · Jun 18, 2020 · 3acab5a · 3acab5a
1 parent fcb2e9e
commit 3acab5a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/packages/main/src/Avatar.hbs b/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>
diff --git a/packages/main/src/Avatar.js b/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();

diff --git a/packages/main/test/pages/Avatar.html b/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>

diff --git a/packages/main/test/pages/img/John$$$ ' (_)Miller#1.png b/packages/main/test/pages/img/John$$$ ' (_)Miller#1.png